Tailwind stone color palette
stone-50 to stone-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. stone-500 is #79716B in v4 and #78716C in v3.
Every stone shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| stone-50 | bg-stone-50 | oklch(98.5% 0.001 106.423) | #FAFAF9 | #FAFAF9 | Cultured #F8F9FA |
| stone-100 | bg-stone-100 | oklch(97% 0.001 106.424) | #F5F5F4 | #F5F5F4 | White Smoke #F5F5F5 |
| stone-200 | bg-stone-200 | oklch(92.3% 0.003 48.717) | #E7E5E4 | #E7E5E4 | Platinum #E0E1DD |
| stone-300 | bg-stone-300 | oklch(86.9% 0.005 56.366) | #D6D3D1 | #D6D3D1 | Light Gray #D3D3D3 |
| stone-400 | bg-stone-400 | oklch(70.9% 0.01 56.259) | #A6A09B | #A8A29E | Cement #A5A391 |
| stone-500 | bg-stone-500 | oklch(55.3% 0.013 58.071) | #79716B | #78716C | Battleship Gray #6C757D |
| stone-600 | bg-stone-600 | oklch(44.4% 0.011 73.639) | #57534D | #57534E | Dark Slate Gray #2F4F4F |
| stone-700 | bg-stone-700 | oklch(37.4% 0.01 67.558) | #44403B | #44403C | Charcoal Grey #3C4142 |
| stone-800 | bg-stone-800 | oklch(26.8% 0.007 34.298) | #292524 | #292524 | Jet #212529 |
| stone-900 | bg-stone-900 | oklch(21.6% 0.006 56.043) | #1C1917 | #1C1917 | Rich Black #0D1B2A |
| stone-950 | bg-stone-950 | oklch(14.7% 0.004 49.25) | #0C0A09 | #0C0A09 | Almost Black #070D0D |
stone contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, stone shades 500, 600, 700, 800, 900, 950 pass; on black, stone shades 50, 100, 200, 300, 400 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| stone-50 | #FAFAF9 | 1.04:1 Fail | 20.10:1 AA |
| stone-100 | #F5F5F4 | 1.09:1 Fail | 19.24:1 AA |
| stone-200 | #E7E5E4 | 1.25:1 Fail | 16.72:1 AA |
| stone-300 | #D6D3D1 | 1.48:1 Fail | 14.09:1 AA |
| stone-400 | #A6A09B | 2.58:1 Fail | 8.12:1 AA |
| stone-500 | #79716B | 4.78:1 AA | 4.38:1 AA large |
| stone-600 | #57534D | 7.63:1 AA | 2.74:1 Fail |
| stone-700 | #44403B | 10.28:1 AA | 2.04:1 Fail |
| stone-800 | #292524 | 15.16:1 AA | 1.38:1 Fail |
| stone-900 | #1C1917 | 17.48:1 AA | 1.20:1 Fail |
| stone-950 | #0C0A09 | 19.75:1 AA | 1.06:1 Fail |
Use stone in your project
Utility class: bg-stone-500. CSS variable: var(--color-stone-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-stone-50: oklch(98.5% 0.001 106.423);
--color-stone-100: oklch(97% 0.001 106.424);
--color-stone-200: oklch(92.3% 0.003 48.717);
--color-stone-300: oklch(86.9% 0.005 56.366);
--color-stone-400: oklch(70.9% 0.01 56.259);
--color-stone-500: oklch(55.3% 0.013 58.071);
--color-stone-600: oklch(44.4% 0.011 73.639);
--color-stone-700: oklch(37.4% 0.01 67.558);
--color-stone-800: oklch(26.8% 0.007 34.298);
--color-stone-900: oklch(21.6% 0.006 56.043);
--color-stone-950: oklch(14.7% 0.004 49.25);
}
More Tailwind colors
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #79716B and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.