RecolorOpen Recolor

Eleven shades, from cyan-50 to cyan-950

Tailwind cyan colors

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

Last updated

  1. 50#ecfeff
  2. 100#cefafe
  3. 200#a2f4fd
  4. 300#53eafd
  5. 400#00d3f2
  6. 500#00b8db
  7. 600#0092b8
  8. 700#007595
  9. 800#005f78
  10. 900#104e64
  11. 950#053345
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
cyan-50oklch(98.4% 0.019 200.873)#ecfeff1.04:1 fails20.19:1 passes
cyan-100oklch(95.6% 0.045 203.388)#cefafe1.12:1 fails18.73:1 passes
cyan-200oklch(91.7% 0.08 205.041)#a2f4fd1.24:1 fails16.89:1 passes
cyan-300oklch(86.5% 0.127 207.078)#53eafd1.44:1 fails14.56:1 passes
cyan-400oklch(78.9% 0.154 211.53)#00d3f21.81:1 fails11.60:1 passes
cyan-500oklch(71.5% 0.143 215.221)#00b8db2.37:1 fails8.88:1 passes
cyan-600oklch(60.9% 0.126 221.723)#0092b83.62:1 fails5.80:1 passes
cyan-700oklch(52% 0.105 223.128)#0075955.28:1 passes3.98:1 fails
cyan-800oklch(45% 0.085 224.283)#005f787.22:1 passes2.91:1 fails
cyan-900oklch(39.8% 0.07 227.392)#104e649.15:1 passes2.30:1 fails
cyan-950oklch(30.2% 0.056 229.695)#05334513.41:1 passes1.57:1 fails

Text on cyan, and cyan as text

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

Chroma peaks at cyan-400 (0.154) and falls toward both ends, while the hue drifts 28.8 degrees across the scale.

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

Sources