colors.to
Back to #ffe4c4

Tailwind CSS Palette

Custom color palette generated from #ffe4c4

50#ffffff
100#fffdfa
200#fffaf4
300#fff8ef
400#fff5e9
500#fff3e4
600#fff0df
700#ffeed9
800#ffebd4
900#ffe9cf
950#ffe6c9

How to Install

1

Open your tailwind.config.js file

Locate the configuration file in your project's root directory.

2

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: '#fffdfa',
  200: '#fffaf4',
  300: '#fff8ef',
  400: '#fff5e9',
  500: '#fff3e4',
  600: '#fff0df',
  700: '#ffeed9',
  800: '#ffebd4',
  900: '#ffe9cf',
  950: '#ffe6c9',
},
      },
    },
  },
  plugins: [],
}
3

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: #fffdfa;
--color-custom-200: #fffaf4;
--color-custom-300: #fff8ef;
--color-custom-400: #fff5e9;
--color-custom-500: #fff3e4;
--color-custom-600: #fff0df;
--color-custom-700: #ffeed9;
--color-custom-800: #ffebd4;
--color-custom-900: #ffe9cf;
--color-custom-950: #ffe6c9;
}

Individual Color Values

custom-50
#ffffff
custom-100
#fffdfa
custom-200
#fffaf4
custom-300
#fff8ef
custom-400
#fff5e9
custom-500
#fff3e4
custom-600
#fff0df
custom-700
#ffeed9
custom-800
#ffebd4
custom-900
#ffe9cf
custom-950
#ffe6c9

Learn more about customizing colors in Tailwind CSS