Tailwind CSS Palette

Custom color palette generated from #9932cc

50#ffffff

100#f7edfb

200#efdbf7

300#e7c9f2

400#deb7ee

500#d5a5e9

600#cc93e5

700#c281e0

800#b96fdb

900#ae5cd6

950#a448d1

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: '#f7edfb',
  200: '#efdbf7',
  300: '#e7c9f2',
  400: '#deb7ee',
  500: '#d5a5e9',
  600: '#cc93e5',
  700: '#c281e0',
  800: '#b96fdb',
  900: '#ae5cd6',
  950: '#a448d1',
},
      },
    },
  },
  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: #f7edfb;
--color-custom-200: #efdbf7;
--color-custom-300: #e7c9f2;
--color-custom-400: #deb7ee;
--color-custom-500: #d5a5e9;
--color-custom-600: #cc93e5;
--color-custom-700: #c281e0;
--color-custom-800: #b96fdb;
--color-custom-900: #ae5cd6;
--color-custom-950: #a448d1;
}

Individual Color Values

custom-50

#ffffff

custom-100

#f7edfb

custom-200

#efdbf7

custom-300

#e7c9f2

custom-400

#deb7ee

custom-500

#d5a5e9

custom-600

#cc93e5

custom-700

#c281e0

custom-800

#b96fdb

custom-900

#ae5cd6

custom-950

#a448d1

Learn more about customizing colors in Tailwind CSS