Tailwind CSS Palette

Custom color palette generated from #e9967a

50#ffffff

100#fef5f2

200#fdece6

300#fce2d9

400#fbd9cd

500#f9cfc1

600#f7c5b5

700#f4bca9

800#f2b29d

900#efa991

950#eca085

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: '#fef5f2',
  200: '#fdece6',
  300: '#fce2d9',
  400: '#fbd9cd',
  500: '#f9cfc1',
  600: '#f7c5b5',
  700: '#f4bca9',
  800: '#f2b29d',
  900: '#efa991',
  950: '#eca085',
},
      },
    },
  },
  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: #fef5f2;
--color-custom-200: #fdece6;
--color-custom-300: #fce2d9;
--color-custom-400: #fbd9cd;
--color-custom-500: #f9cfc1;
--color-custom-600: #f7c5b5;
--color-custom-700: #f4bca9;
--color-custom-800: #f2b29d;
--color-custom-900: #efa991;
--color-custom-950: #eca085;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fef5f2

custom-200

#fdece6

custom-300

#fce2d9

custom-400

#fbd9cd

custom-500

#f9cfc1

custom-600

#f7c5b5

custom-700

#f4bca9

custom-800

#f2b29d

custom-900

#efa991

custom-950

#eca085

Learn more about customizing colors in Tailwind CSS