50#ffffff
100#eff1eb
200#dfe3d6
300#cfd5c2
400#bfc7af
500#afb99c
600#a0ac89
700#919e76
800#819164
900#738452
950#647841
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: '#eff1eb',
200: '#dfe3d6',
300: '#cfd5c2',
400: '#bfc7af',
500: '#afb99c',
600: '#a0ac89',
700: '#919e76',
800: '#819164',
900: '#738452',
950: '#647841',
},
},
},
},
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: #eff1eb;
--color-custom-200: #dfe3d6;
--color-custom-300: #cfd5c2;
--color-custom-400: #bfc7af;
--color-custom-500: #afb99c;
--color-custom-600: #a0ac89;
--color-custom-700: #919e76;
--color-custom-800: #819164;
--color-custom-900: #738452;
--color-custom-950: #647841;
}Individual Color Values
custom-50
#ffffff
custom-100
#eff1eb
custom-200
#dfe3d6
custom-300
#cfd5c2
custom-400
#bfc7af
custom-500
#afb99c
custom-600
#a0ac89
custom-700
#919e76
custom-800
#819164
custom-900
#738452
custom-950
#647841
Learn more about customizing colors in Tailwind CSS