Tailwind CSS Palette

Custom color palette generated from #8fbc8f

50#ffffff

100#f5f9f4

200#eaf3ea

300#e0ede0

400#d6e7d5

500#cce0cb

600#c2dac1

700#b7d4b7

800#adcead

900#a3c8a3

950#99c299

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: '#f5f9f4',
  200: '#eaf3ea',
  300: '#e0ede0',
  400: '#d6e7d5',
  500: '#cce0cb',
  600: '#c2dac1',
  700: '#b7d4b7',
  800: '#adcead',
  900: '#a3c8a3',
  950: '#99c299',
},
      },
    },
  },
  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: #f5f9f4;
--color-custom-200: #eaf3ea;
--color-custom-300: #e0ede0;
--color-custom-400: #d6e7d5;
--color-custom-500: #cce0cb;
--color-custom-600: #c2dac1;
--color-custom-700: #b7d4b7;
--color-custom-800: #adcead;
--color-custom-900: #a3c8a3;
--color-custom-950: #99c299;
}

Individual Color Values

custom-50

#ffffff

custom-100

#f5f9f4

custom-200

#eaf3ea

custom-300

#e0ede0

custom-400

#d6e7d5

custom-500

#cce0cb

custom-600

#c2dac1

custom-700

#b7d4b7

custom-800

#adcead

custom-900

#a3c8a3

custom-950

#99c299

Learn more about customizing colors in Tailwind CSS