Tailwind CSS Palette

Custom color palette generated from #ff69b4

50#ffffff

100#fff2f8

200#ffe6f1

300#ffd9ea

400#ffcce3

500#ffbfdc

600#ffb2d6

700#ffa4cf

800#ff96c8

900#ff88c1

950#ff79bb

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: '#fff2f8',
  200: '#ffe6f1',
  300: '#ffd9ea',
  400: '#ffcce3',
  500: '#ffbfdc',
  600: '#ffb2d6',
  700: '#ffa4cf',
  800: '#ff96c8',
  900: '#ff88c1',
  950: '#ff79bb',
},
      },
    },
  },
  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: #fff2f8;
--color-custom-200: #ffe6f1;
--color-custom-300: #ffd9ea;
--color-custom-400: #ffcce3;
--color-custom-500: #ffbfdc;
--color-custom-600: #ffb2d6;
--color-custom-700: #ffa4cf;
--color-custom-800: #ff96c8;
--color-custom-900: #ff88c1;
--color-custom-950: #ff79bb;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fff2f8

custom-200

#ffe6f1

custom-300

#ffd9ea

custom-400

#ffcce3

custom-500

#ffbfdc

custom-600

#ffb2d6

custom-700

#ffa4cf

custom-800

#ff96c8

custom-900

#ff88c1

custom-950

#ff79bb

Learn more about customizing colors in Tailwind CSS