Tailwind CSS Palette

Custom color palette generated from #ffdab9

50#ffffff

100#fffcf9

200#fff8f2

300#fff5ec

400#fff1e5

500#ffeedf

600#ffebd9

700#ffe7d2

800#ffe4cc

900#ffe1c6

950#ffddbf

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: '#fffcf9',
  200: '#fff8f2',
  300: '#fff5ec',
  400: '#fff1e5',
  500: '#ffeedf',
  600: '#ffebd9',
  700: '#ffe7d2',
  800: '#ffe4cc',
  900: '#ffe1c6',
  950: '#ffddbf',
},
      },
    },
  },
  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: #fffcf9;
--color-custom-200: #fff8f2;
--color-custom-300: #fff5ec;
--color-custom-400: #fff1e5;
--color-custom-500: #ffeedf;
--color-custom-600: #ffebd9;
--color-custom-700: #ffe7d2;
--color-custom-800: #ffe4cc;
--color-custom-900: #ffe1c6;
--color-custom-950: #ffddbf;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fffcf9

custom-200

#fff8f2

custom-300

#fff5ec

custom-400

#fff1e5

custom-500

#ffeedf

custom-600

#ffebd9

custom-700

#ffe7d2

custom-800

#ffe4cc

custom-900

#ffe1c6

custom-950

#ffddbf

Learn more about customizing colors in Tailwind CSS