7 min read
2026-01-15
Tailwind CSS provides a carefully curated palette of 22 colors, each with 11 shades (from 50 to 950). That's over 240 ready-made colors for any project.
Format: `{property}-{color}-{shade}`
`bg-blue-500` — medium-brightness blue background
`text-gray-900` — dark gray text
`border-red-300` — light red border
| Shade | Usage |
|---|---|
| 50 | Very light background |
| 100-200 | Card backgrounds, surfaces |
| 300-400 | Borders, dividers |
| 500 | Primary color |
| 600-700 | Hover states, accents |
| 800-900 | Text, headings |
| 950 | Darkest |
It is recommended to create semantic variables:
Primary — main action color
Secondary — secondary color
Success — green-500
Warning — amber-500
Error — red-500
Tailwind allows extending the palette through tailwind.config.js by adding custom colors and shades.
See also: Material Design Colors, Contrast Checker, Color Converter