Tailwind Slate
All 11 Slate shades, 50 to 950 — click any value to copy it as hex, OKLCH, RGB, HSL or class name.
Slate is a cool, blue-tinted gray — the most popular shadcn/ui base color. Its subtle cool cast reads as calm and professional, which is why it anchors so many SaaS dashboards.
Click any value to copy it. All 11 Slate 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 Slate?
Tailwind Slate is one of the 22 default color families in Tailwind CSS, published as 11 shades running from slate-50 (lightest) to slate-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-slate-500, text-slate-700 and border-slate-200 — no config needed.
Where to use Tailwind Slate
- Page and card backgrounds:
bg-slate-50(light) /bg-slate-950(dark). - Body text:
text-slate-900on light,text-slate-100on dark. - Dividers and borders:
border-slate-200/border-slate-800.
Related Tailwind colors
Related tools
- Tailwind Colors — the full palette, all 22 families and 242 shades.
- Shadcn Theme Generator — turn Slate into light and dark shadcn tokens.
- OKLCH Converter — convert any Slate hex to OKLCH, RGB or HSL.
- Color Shades Generator — turn your own brand color into an OKLCH tint and shade scale.
