Tailwind CSS Palette

Custom color palette generated from #f08080

50#ffffff

100#fff4f3

200#ffe8e7

300#ffdddb

400#fed1cf

500#fdc6c3

600#fcbbb8

700#faafac

800#f8a4a1

900#f69896

950#f38c8b

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: '#fff4f3',
  200: '#ffe8e7',
  300: '#ffdddb',
  400: '#fed1cf',
  500: '#fdc6c3',
  600: '#fcbbb8',
  700: '#faafac',
  800: '#f8a4a1',
  900: '#f69896',
  950: '#f38c8b',
},
      },
    },
  },
  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: #fff4f3;
--color-custom-200: #ffe8e7;
--color-custom-300: #ffdddb;
--color-custom-400: #fed1cf;
--color-custom-500: #fdc6c3;
--color-custom-600: #fcbbb8;
--color-custom-700: #faafac;
--color-custom-800: #f8a4a1;
--color-custom-900: #f69896;
--color-custom-950: #f38c8b;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fff4f3

custom-200

#ffe8e7

custom-300

#ffdddb

custom-400

#fed1cf

custom-500

#fdc6c3

custom-600

#fcbbb8

custom-700

#faafac

custom-800

#f8a4a1

custom-900

#f69896

custom-950

#f38c8b

Learn more about customizing colors in Tailwind CSS