Tailwind CSS Palette

Custom color palette generated from #da70d6

50#ffffff

100#fdf2fb

200#fae6f8

300#f7d9f4

400#f4ccf1

500#f1bfed

600#eeb3e9

700#eaa6e5

800#e699e2

900#e28cde

950#de7eda

How to Install

Open your tailwind.config.js file

Locate the configuration file in your project's root directory.

Add the color palette to your theme

Copy the following configuration into your theme's colors section:

module.exports = {
  theme: {
    extend: {
      colors: {
        custom: {
  50: '#ffffff',
  100: '#fdf2fb',
  200: '#fae6f8',
  300: '#f7d9f4',
  400: '#f4ccf1',
  500: '#f1bfed',
  600: '#eeb3e9',
  700: '#eaa6e5',
  800: '#e699e2',
  900: '#e28cde',
  950: '#de7eda',
},
      },
    },
  },
  plugins: [],
}

Use the colors in your HTML/JSX

You can now use your custom colors with Tailwind utility classes:

<!-- Background color -->
<div class="bg-custom-500">...</div>

<!-- Text color -->
<p class="text-custom-700">...</p>

<!-- Border color -->
<div class="border-custom-300">...</div>

<!-- Hover states -->
<button class="bg-custom-500 hover:bg-custom-600">...</button>

Alternative: CSS Variables

If you prefer using CSS custom properties, here are the variables:

:root {
--color-custom-50: #ffffff;
--color-custom-100: #fdf2fb;
--color-custom-200: #fae6f8;
--color-custom-300: #f7d9f4;
--color-custom-400: #f4ccf1;
--color-custom-500: #f1bfed;
--color-custom-600: #eeb3e9;
--color-custom-700: #eaa6e5;
--color-custom-800: #e699e2;
--color-custom-900: #e28cde;
--color-custom-950: #de7eda;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fdf2fb

custom-200

#fae6f8

custom-300

#f7d9f4

custom-400

#f4ccf1

custom-500

#f1bfed

custom-600

#eeb3e9

custom-700

#eaa6e5

custom-800

#e699e2

custom-900

#e28cde

custom-950

#de7eda

Learn more about customizing colors in Tailwind CSS