Tailwind Yellow
Yellow is the brightest, most attention-grabbing hue in the palette — and the hardest for legible text. Lean on dark shades for type and reserve the bright mids for backgrounds and highlights.
Click any value to copy it. All 11 Yellow shades (50–950) in hex, OKLCH, RGB, HSL and Tailwind class.
| Swatch | Shade | Class | Hex | OKLCH | RGB | HSL |
|---|---|---|---|---|---|---|
| 50 | ||||||
| 100 | ||||||
| 200 | ||||||
| 300 | ||||||
| 400 | ||||||
| 500 | ||||||
| 600 | ||||||
| 700 | ||||||
| 800 | ||||||
| 900 | ||||||
| 950 |
Where to use Tailwind Yellow
- Highlight backgrounds:
bg-yellow-200. - Legible yellow text needs dark shades:
text-yellow-700. - Caution accents:
bg-yellow-400 text-yellow-950.
Related Tailwind colors
Build a full theme from Yellow with the shadcn theme generator, or see the whole Tailwind colors palette.
Copied
