RecolorOpen Recolor

Eleven shades, from mist-50 to mist-950

Tailwind mist colors

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

Last updated

  1. 50#f9fbfb
  2. 100#f1f3f3
  3. 200#e3e7e8
  4. 300#d0d6d8
  5. 400#9ca8ab
  6. 500#67787c
  7. 600#4b585b
  8. 700#394447
  9. 800#22292b
  10. 900#161b1d
  11. 950#090b0c
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
mist-50oklch(98.7% 0.002 197.1)#f9fbfb1.04:1 fails20.22:1 passes
mist-100oklch(96.3% 0.002 197.1)#f1f3f31.11:1 fails18.85:1 passes
mist-200oklch(92.5% 0.005 214.3)#e3e7e81.25:1 fails16.86:1 passes
mist-300oklch(87.2% 0.007 219.6)#d0d6d81.47:1 fails14.29:1 passes
mist-400oklch(72.3% 0.014 214.4)#9ca8ab2.44:1 fails8.60:1 passes
mist-500oklch(56% 0.021 213.5)#67787c4.61:1 passes4.55:1 passes
mist-600oklch(45% 0.017 213.2)#4b585b7.38:1 passes2.85:1 fails
mist-700oklch(37.8% 0.015 216)#39444710.04:1 passes2.09:1 fails
mist-800oklch(27.5% 0.011 216.9)#22292b14.79:1 passes1.42:1 fails
mist-900oklch(21.8% 0.008 223.9)#161b1d17.38:1 passes1.21:1 fails
mist-950oklch(14.8% 0.004 228.8)#090b0c19.72:1 passes1.06:1 fails

Text on mist, and mist as text

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

It is one of Tailwind's nine grays: its chroma stays at or under 0.021, with a hint of cyan.

All eleven fit inside sRGB, so every hex code here is exact.

Sources