colors.to
Back to #d2691e

Tailwind CSS Palette

Custom color palette generated from #d2691e

50#ffffff
100#fef1ea
200#fce3d5
300#fad6c0
400#f7c8ab
500#f3ba97
600#efad83
700#ea9f70
800#e5925c
900#df8448
950#d97734

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: '#fef1ea',
  200: '#fce3d5',
  300: '#fad6c0',
  400: '#f7c8ab',
  500: '#f3ba97',
  600: '#efad83',
  700: '#ea9f70',
  800: '#e5925c',
  900: '#df8448',
  950: '#d97734',
},
      },
    },
  },
  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: #fef1ea;
--color-custom-200: #fce3d5;
--color-custom-300: #fad6c0;
--color-custom-400: #f7c8ab;
--color-custom-500: #f3ba97;
--color-custom-600: #efad83;
--color-custom-700: #ea9f70;
--color-custom-800: #e5925c;
--color-custom-900: #df8448;
--color-custom-950: #d97734;
}

Individual Color Values

custom-50
#ffffff
custom-100
#fef1ea
custom-200
#fce3d5
custom-300
#fad6c0
custom-400
#f7c8ab
custom-500
#f3ba97
custom-600
#efad83
custom-700
#ea9f70
custom-800
#e5925c
custom-900
#df8448
custom-950
#d97734

Learn more about customizing colors in Tailwind CSS