RecolorOpen Recolor

Eleven shades, from blue-50 to blue-950

Tailwind blue colors

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

Last updated

  1. 50#eff6ff
  2. 100#dbeafe
  3. 200#bedbff
  4. 300#8ec5ff
  5. 400#51a2ff
  6. 500#2b7fff
  7. 600#155dfc
  8. 700#1447e6
  9. 800#193cb8
  10. 900#1c398e
  11. 950#162456
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
blue-50oklch(97% 0.014 254.604)#eff6ff1.09:1 fails19.30:1 passes
blue-100oklch(93.2% 0.032 255.585)#dbeafe1.22:1 fails17.21:1 passes
blue-200oklch(88.2% 0.059 254.128)#bedbff1.42:1 fails14.77:1 passes
blue-300oklch(80.9% 0.105 251.813)#8ec5ff1.81:1 fails11.58:1 passes
blue-400oklch(70.7% 0.165 254.624)#51a2ff2.64:1 fails7.96:1 passes
blue-500oklch(62.3% 0.214 259.815)#2b7fff3.76:1 fails5.58:1 passes
blue-600oklch(54.6% 0.245 262.881)#155dfc5.25:1 passes4.00:1 fails
blue-700oklch(48.8% 0.243 264.376)#1447e66.83:1 passes3.07:1 fails
blue-800oklch(42.4% 0.199 265.638)#193cb88.82:1 passes2.38:1 fails
blue-900oklch(37.9% 0.146 265.522)#1c398e10.37:1 passes2.03:1 fails
blue-950oklch(28.2% 0.091 267.935)#16245614.78:1 passes1.42:1 fails

Text on blue, and blue as text

As a text color the rule turns around: blue text on a white page passes AA from blue-600 on, and on a black page up to blue-500, since a contrast ratio is the same whichever color is in front.

Chroma peaks at blue-600 (0.245) and falls toward both ends, while the hue drifts 16.1 degrees across the scale.

4 of the eleven lie outside sRGB, so their hex codes are the nearest sRGB colors, and a wide-gamut screen shows them stronger.

Sources