Tailwind CSS Palette

Custom color palette generated from #bc8f8f

50#ffffff

100#f9f4f4

200#f3eaea

300#ede0df

400#e7d5d5

500#e1cbcb

600#dbc1c0

700#d5b7b6

800#cfadac

900#c9a3a2

950#c29999

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: '#f9f4f4',
  200: '#f3eaea',
  300: '#ede0df',
  400: '#e7d5d5',
  500: '#e1cbcb',
  600: '#dbc1c0',
  700: '#d5b7b6',
  800: '#cfadac',
  900: '#c9a3a2',
  950: '#c29999',
},
      },
    },
  },
  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: #f9f4f4;
--color-custom-200: #f3eaea;
--color-custom-300: #ede0df;
--color-custom-400: #e7d5d5;
--color-custom-500: #e1cbcb;
--color-custom-600: #dbc1c0;
--color-custom-700: #d5b7b6;
--color-custom-800: #cfadac;
--color-custom-900: #c9a3a2;
--color-custom-950: #c29999;
}

Individual Color Values

custom-50

#ffffff

custom-100

#f9f4f4

custom-200

#f3eaea

custom-300

#ede0df

custom-400

#e7d5d5

custom-500

#e1cbcb

custom-600

#dbc1c0

custom-700

#d5b7b6

custom-800

#cfadac

custom-900

#c9a3a2

custom-950

#c29999

Learn more about customizing colors in Tailwind CSS