Tailwind sky color palette
sky-50 to sky-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. sky-500 is #00A6F4 in v4 and #0EA5E9 in v3.
Every sky shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| sky-50 | bg-sky-50 | oklch(97.7% 0.013 236.62) | #F0F9FF | #F0F9FF | Alice Blue #F0F8FF |
| sky-100 | bg-sky-100 | oklch(95.1% 0.026 236.824) | #DFF2FE | #E0F2FE | Anti-Flash White #EDF2F4 |
| sky-200 | bg-sky-200 | oklch(90.1% 0.058 230.902) | #B8E6FE | #BAE6FD | Diamond #B9F2FF |
| sky-300 | bg-sky-300 | oklch(82.8% 0.111 230.318) | #74D4FF | #7DD3FC | Light Sky Blue #87CEFA |
| sky-400 | bg-sky-400 | oklch(74.6% 0.16 232.661) | #00BCFF | #38BDF8 | Deep Sky Blue #00BFFF |
| sky-500 | bg-sky-500 | oklch(68.5% 0.169 237.323) | #00A6F4 | #0EA5E9 | Chefchaouen Blue #4895EF |
| sky-600 | bg-sky-600 | oklch(58.8% 0.158 241.966) | #0084D1 | #0284C7 | Water Blue #0E87CC |
| sky-700 | bg-sky-700 | oklch(50% 0.134 242.749) | #0069A8 | #0369A1 | Mid Blue #276AB3 |
| sky-800 | bg-sky-800 | oklch(44.3% 0.11 240.79) | #00598A | #075985 | Deep Sea Blue #015482 |
| sky-900 | bg-sky-900 | oklch(39.1% 0.09 240.876) | #024A70 | #0C4A6E | Twilight Blue #0A437A |
| sky-950 | bg-sky-950 | oklch(29.3% 0.066 243.157) | #052F4A | #082F49 | Oxford Blue #1B263B |
sky contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, sky shades 700, 800, 900, 950 pass; on black, sky shades 50, 100, 200, 300, 400, 500, 600 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| sky-50 | #F0F9FF | 1.06:1 Fail | 19.69:1 AA |
| sky-100 | #DFF2FE | 1.14:1 Fail | 18.26:1 AA |
| sky-200 | #B8E6FE | 1.33:1 Fail | 15.78:1 AA |
| sky-300 | #74D4FF | 1.66:1 Fail | 12.60:1 AA |
| sky-400 | #00BCFF | 2.17:1 Fail | 9.63:1 AA |
| sky-500 | #00A6F4 | 2.70:1 Fail | 7.76:1 AA |
| sky-600 | #0084D1 | 4.02:1 AA large | 5.22:1 AA |
| sky-700 | #0069A8 | 5.85:1 AA | 3.58:1 AA large |
| sky-800 | #00598A | 7.51:1 AA | 2.79:1 Fail |
| sky-900 | #024A70 | 9.47:1 AA | 2.21:1 Fail |
| sky-950 | #052F4A | 13.88:1 AA | 1.51:1 Fail |
Use sky in your project
Utility class: bg-sky-500. CSS variable: var(--color-sky-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-sky-50: oklch(97.7% 0.013 236.62);
--color-sky-100: oklch(95.1% 0.026 236.824);
--color-sky-200: oklch(90.1% 0.058 230.902);
--color-sky-300: oklch(82.8% 0.111 230.318);
--color-sky-400: oklch(74.6% 0.16 232.661);
--color-sky-500: oklch(68.5% 0.169 237.323);
--color-sky-600: oklch(58.8% 0.158 241.966);
--color-sky-700: oklch(50% 0.134 242.749);
--color-sky-800: oklch(44.3% 0.11 240.79);
--color-sky-900: oklch(39.1% 0.09 240.876);
--color-sky-950: oklch(29.3% 0.066 243.157);
}
More Tailwind colors
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #00A6F4 and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.