RecolorOpen Recolor

Eleven shades, from sky-50 to sky-950

Tailwind sky colors

Tailwind CSS 4.3.3 defines eleven sky shades in OKLCH, from sky-50 (#f0f9ff) to sky-950 (#052f4a). On them white text passes WCAG AA from sky-700 to sky-950, and black text from sky-50 to sky-600. Recolor (recolor.page) shows the scale on a real page.

Last updated

  1. 50#f0f9ff
  2. 100#dff2fe
  3. 200#b8e6fe
  4. 300#74d4ff
  5. 400#00bcff
  6. 500#00a6f4
  7. 600#0084d1
  8. 700#0069a8
  9. 800#00598a
  10. 900#024a70
  11. 950#052f4a
From the theme file of Tailwind CSS 4.3.3, converted with Recolor's color code, October 9, 2026; contrast as WCAG 2.2 defines it
ShadeOKLCHHexWhite textBlack text
sky-50oklch(97.7% 0.013 236.62)#f0f9ff1.07:1 fails19.70:1 passes
sky-100oklch(95.1% 0.026 236.824)#dff2fe1.15:1 fails18.27:1 passes
sky-200oklch(90.1% 0.058 230.902)#b8e6fe1.33:1 fails15.79:1 passes
sky-300oklch(82.8% 0.111 230.318)#74d4ff1.67:1 fails12.60:1 passes
sky-400oklch(74.6% 0.16 232.661)#00bcff2.18:1 fails9.64:1 passes
sky-500oklch(68.5% 0.169 237.323)#00a6f42.71:1 fails7.76:1 passes
sky-600oklch(58.8% 0.158 241.966)#0084d14.02:1 fails5.22:1 passes
sky-700oklch(50% 0.134 242.749)#0069a85.86:1 passes3.59:1 fails
sky-800oklch(44.3% 0.11 240.79)#00598a7.51:1 passes2.80:1 fails
sky-900oklch(39.1% 0.09 240.876)#024a709.48:1 passes2.22:1 fails
sky-950oklch(29.3% 0.066 243.157)#052f4a13.89:1 passes1.51:1 fails

Text on sky, and sky as text

For sky text the same lines hold in reverse: on white, use sky-700 or darker; on black, sky-600 or lighter. Contrast does not care which color sits behind.

The most colorful shade is sky-500, chroma 0.169; the hue moves 12.8 degrees between sky-50 and sky-950.

Of the eleven values, 7 reach beyond sRGB; for those the hex is a gamut-mapped stand-in with less chroma.

Sources