Tailwind CSS Palette

Custom color palette generated from #ff8c00

50#ffffff

100#fff5ea

200#ffead5

300#ffe0c0

400#ffd5ac

500#ffcb98

600#ffc183

700#ffb66f

800#ffac5a

900#ffa144

950#ff972b

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: '#fff5ea',
  200: '#ffead5',
  300: '#ffe0c0',
  400: '#ffd5ac',
  500: '#ffcb98',
  600: '#ffc183',
  700: '#ffb66f',
  800: '#ffac5a',
  900: '#ffa144',
  950: '#ff972b',
},
      },
    },
  },
  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: #fff5ea;
--color-custom-200: #ffead5;
--color-custom-300: #ffe0c0;
--color-custom-400: #ffd5ac;
--color-custom-500: #ffcb98;
--color-custom-600: #ffc183;
--color-custom-700: #ffb66f;
--color-custom-800: #ffac5a;
--color-custom-900: #ffa144;
--color-custom-950: #ff972b;
}

Individual Color Values

custom-50

#ffffff

custom-100

#fff5ea

custom-200

#ffead5

custom-300

#ffe0c0

custom-400

#ffd5ac

custom-500

#ffcb98

custom-600

#ffc183

custom-700

#ffb66f

custom-800

#ffac5a

custom-900

#ffa144

custom-950

#ff972b

Learn more about customizing colors in Tailwind CSS