Tailwind CSS Palette

Custom color palette generated from #663399

50#ffffff

100#f1ebf6

200#e4d8ed

300#d6c5e3

400#c8b2da

500#bb9fd1

600#ad8dc8

700#9f7abe

800#9168b5

900#8357ac

950#7545a2

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: '#f1ebf6',
  200: '#e4d8ed',
  300: '#d6c5e3',
  400: '#c8b2da',
  500: '#bb9fd1',
  600: '#ad8dc8',
  700: '#9f7abe',
  800: '#9168b5',
  900: '#8357ac',
  950: '#7545a2',
},
      },
    },
  },
  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: #f1ebf6;
--color-custom-200: #e4d8ed;
--color-custom-300: #d6c5e3;
--color-custom-400: #c8b2da;
--color-custom-500: #bb9fd1;
--color-custom-600: #ad8dc8;
--color-custom-700: #9f7abe;
--color-custom-800: #9168b5;
--color-custom-900: #8357ac;
--color-custom-950: #7545a2;
}

Individual Color Values

custom-50

#ffffff

custom-100

#f1ebf6

custom-200

#e4d8ed

custom-300

#d6c5e3

custom-400

#c8b2da

custom-500

#bb9fd1

custom-600

#ad8dc8

custom-700

#9f7abe

custom-800

#9168b5

custom-900

#8357ac

custom-950

#7545a2

Learn more about customizing colors in Tailwind CSS