Tailwind Yellow
All 11 Yellow shades, 50 to 950 — click any value to copy it as hex, OKLCH, RGB, HSL or class name.
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 |
What is Tailwind Yellow?
Tailwind Yellow is one of the 22 default color families in Tailwind CSS, published as 11 shades running from yellow-50 (lightest) to yellow-950 (darkest). Tailwind CSS v4 defines every shade in OKLCH, with a hex fallback for older browsers. Reach them through utility classes such as bg-yellow-500, text-yellow-700 and border-yellow-200 — no config needed.
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
Related tools
- Tailwind Colors — the full palette, all 22 families and 242 shades.
- Shadcn Theme Generator — turn Yellow into light and dark shadcn tokens.
- OKLCH Converter — convert any Yellow hex to OKLCH, RGB or HSL.
- Color Shades Generator — turn your own brand color into an OKLCH tint and shade scale.
