Tailwind gray color palette
gray-50 to gray-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. gray-500 is #6A7282 in v4 and #6B7280 in v3.
Every gray shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| gray-50 | bg-gray-50 | oklch(98.5% 0.002 247.839) | #F9FAFB | #F9FAFB | Cultured #F8F9FA |
| gray-100 | bg-gray-100 | oklch(96.7% 0.003 264.542) | #F3F4F6 | #F3F4F6 | White Smoke #F5F5F5 |
| gray-200 | bg-gray-200 | oklch(92.8% 0.006 264.531) | #E5E7EB | #E5E7EB | Lavender #E6E6FA |
| gray-300 | bg-gray-300 | oklch(87.2% 0.01 258.338) | #D1D5DC | #D1D5DB | Cadet Gray #CED4DA |
| gray-400 | bg-gray-400 | oklch(70.7% 0.022 261.325) | #99A1AF | #9CA3AF | Cool Steel #97A7B3 |
| gray-500 | bg-gray-500 | oklch(55.1% 0.027 264.364) | #6A7282 | #6B7280 | Battleship Gray #6C757D |
| gray-600 | bg-gray-600 | oklch(44.6% 0.03 256.802) | #4A5565 | #4B5563 | YInMn Blue #415A77 |
| gray-700 | bg-gray-700 | oklch(37.3% 0.034 259.733) | #364153 | #374151 | Dark Grey Blue #29465B |
| gray-800 | bg-gray-800 | oklch(27.8% 0.033 256.848) | #1E2939 | #1F2937 | Oxford Blue #1B263B |
| gray-900 | bg-gray-900 | oklch(21% 0.034 264.665) | #101828 | #111827 | Rich Black #0D1B2A |
| gray-950 | bg-gray-950 | oklch(13% 0.028 261.692) | #030712 | #030712 | Almost Black #070D0D |
gray contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, gray shades 500, 600, 700, 800, 900, 950 pass; on black, gray shades 50, 100, 200, 300, 400 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| gray-50 | #F9FAFB | 1.04:1 Fail | 20.09:1 AA |
| gray-100 | #F3F4F6 | 1.10:1 Fail | 19.08:1 AA |
| gray-200 | #E5E7EB | 1.23:1 Fail | 16.96:1 AA |
| gray-300 | #D1D5DC | 1.47:1 Fail | 14.26:1 AA |
| gray-400 | #99A1AF | 2.60:1 Fail | 8.07:1 AA |
| gray-500 | #6A7282 | 4.83:1 AA | 4.34:1 AA large |
| gray-600 | #4A5565 | 7.55:1 AA | 2.77:1 Fail |
| gray-700 | #364153 | 10.30:1 AA | 2.03:1 Fail |
| gray-800 | #1E2939 | 14.67:1 AA | 1.43:1 Fail |
| gray-900 | #101828 | 17.74:1 AA | 1.18:1 Fail |
| gray-950 | #030712 | 20.13:1 AA | 1.04:1 Fail |
Use gray in your project
Utility class: bg-gray-500. CSS variable: var(--color-gray-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-gray-50: oklch(98.5% 0.002 247.839);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-500: oklch(55.1% 0.027 264.364);
--color-gray-600: oklch(44.6% 0.03 256.802);
--color-gray-700: oklch(37.3% 0.034 259.733);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-gray-900: oklch(21% 0.034 264.665);
--color-gray-950: oklch(13% 0.028 261.692);
}
More Tailwind colors
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #6A7282 and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.