The Color Palette
Use Tailwind's built-in color scale from 50 to 950.
Syntax
class="bg-cyan-500 text-emerald-700"Tailwind ships a rich color palette. Each color (slate, red, cyan, emerald, and more) has shades numbered from 50 (lightest) to 950 (darkest).
The same scale works for text (text-*), backgrounds (bg-*), borders (border-*), and more.
bg-cyan-50— very light.bg-cyan-500— the base shade.bg-cyan-900— very dark.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer picks brand-consistent button colors by choosing from Tailwind's named palette (e.g., indigo-600) instead of hex values.
- A designer creates accessible text by pairing a light background shade (e.g., gray-100) with a dark text shade (e.g., gray-900) from the same scale.
- A product team limits the color palette to a subset of Tailwind's scale in tailwind.config.js to enforce brand guidelines across the codebase.
More examples
Color scale shades
Tailwind's color scale runs from 50 (near-white) to 950 (near-black), letting you pick accessible foreground/background combinations within a hue.
<div class="bg-blue-50 p-4">
<p class="text-blue-900">Darkest on lightest</p>
<p class="text-blue-600">Medium on light</p>
<p class="text-blue-400">Light text example</p>
</div>Semantic color pairing
Light backgrounds (100) paired with dark text (700) from the same hue create high-contrast, semantically colored status badges.
<span class="bg-red-100 text-red-700 px-3 py-1 rounded">Error</span>
<span class="bg-green-100 text-green-700 px-3 py-1 rounded">Success</span>
<span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded">Warning</span>Extend palette in config
Adding a custom brand color to the theme.extend.colors section makes bg-brand, text-brand-light, and similar utilities available everywhere.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
light: '#6ee7b7',
DEFAULT: '#10b981',
dark: '#065f46',
},
},
},
},
}
Discussion