RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind mist-50

Tailwind mist-50 is oklch(98.7% 0.002 197.1) in Tailwind CSS 4.3.3, which is #f9fbfb in hex and rgb(249 251 251). Black text on it reaches 20.22:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#f9fbfbmist-50
From the theme file of Tailwind CSS 4.3.3 (--color-mist-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.7% 0.002 197.1)
Hex#f9fbfb
RGBrgb(249 251 251)
HSLhsl(180 20% 98%)
CSS variablevar(--color-mist-50)
Nearest CSS namesnow #fffafa, 0.008 away in OKLab
White text1.04:1: AA fails, AAA fails, large text fails
Black text20.22:1: AA passes, AAA passes, large text passes

About mist-50

Tailwind mist-50 is a pale gray: OKLCH lightness 98.7%, chroma 0.002, hue 197.1 degrees. It opens the mist scale as its lightest shade, 2.4 points of lightness above mist-100.

HSL and OKLCH agree on how light it is, 98% and 98.7%. Its value fits inside sRGB, so #f9fbfb is the same color, not an approximation.

Black text on mist-50 measures 20.22:1, past the 7:1 of WCAG AAA, while white text manages only 1.04:1. Black text passes on every mist shade from mist-50 to mist-500, 5 shades darker than mist-50.

Its nearest CSS named color, snow (#fffafa), is 0.008 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fefefe
  2. #fefdfd
  3. #fdfcfd
  4. #fdfcfc
  5. #fcfbfb
  6. #f9fbfb
  7. #c6c4c5
  8. #929191
  9. #626161
  10. #353535
  11. #0e0e0e

From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.

A palette around it

  1. #f9fbfb
  2. #418ce2
  3. #1d222e
  4. #b6c2ff
  5. #4e456d

Recolor's generator, with mist-50 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #418ce2, #1d222e, #b6c2ff, #4e456d. Open it in Recolor.

Using mist-50

Pair it with text-black, 20.22:1; mist-50 as text on a black page measures the same ratio. In CSS it is var(--color-mist-50).

HTML
<a class="bg-mist-50 text-black" href="/start">Get started</a>
<p class="text-mist-50">Text in mist-50</p>

Common questions

Does white text pass WCAG AA on Tailwind mist-50?

No. White text measures 1.04:1 on mist-50, under AA's 4.5:1; black text measures 20.22:1 and passes. The lightest mist shade for white text is mist-500.

Is Tailwind mist-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mist-50: oklch(98.7% 0.002 197.1); #f9fbfb is its conversion to sRGB.

Is there a CSS named color for Tailwind mist-50?

Yes, nearly: snow (#fffafa) is 0.008 away in OKLab, too close to tell apart by eye.

Sources