Tailwind CSS Palette

Custom color palette generated from #8a2be2

50#ffffff

100#f6ecfd

200#eddafb

300#e4c7f9

400#dab5f7

500#d0a2f4

600#c690f1

700#bb7def

800#b06bec

900#a457e9

950#9743e5

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: '#f6ecfd',
  200: '#eddafb',
  300: '#e4c7f9',
  400: '#dab5f7',
  500: '#d0a2f4',
  600: '#c690f1',
  700: '#bb7def',
  800: '#b06bec',
  900: '#a457e9',
  950: '#9743e5',
},
      },
    },
  },
  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: #f6ecfd;
--color-custom-200: #eddafb;
--color-custom-300: #e4c7f9;
--color-custom-400: #dab5f7;
--color-custom-500: #d0a2f4;
--color-custom-600: #c690f1;
--color-custom-700: #bb7def;
--color-custom-800: #b06bec;
--color-custom-900: #a457e9;
--color-custom-950: #9743e5;
}

Individual Color Values

custom-50

#ffffff

custom-100

#f6ecfd

custom-200

#eddafb

custom-300

#e4c7f9

custom-400

#dab5f7

custom-500

#d0a2f4

custom-600

#c690f1

custom-700

#bb7def

custom-800

#b06bec

custom-900

#a457e9

custom-950

#9743e5

Learn more about customizing colors in Tailwind CSS