RecolorOpen Recolor

A pale cool gray, black text passes AA

Tailwind mist-200

The hex code of Tailwind mist-200 is #e3e7e8 (rgb(227 231 232)), from its Tailwind CSS 4.3.3 value oklch(92.5% 0.005 214.3). Black text on it reaches 16.86:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#e3e7e8mist-200
From the theme file of Tailwind CSS 4.3.3 (--color-mist-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(92.5% 0.005 214.3)
Hex#e3e7e8
RGBrgb(227 231 232)
HSLhsl(192 10% 90%)
CSS variablevar(--color-mist-200)
Nearest CSS namelavender #e6e6fa, 0.026 away in OKLab
White text1.25:1: AA fails, AAA fails, large text fails
Black text16.86:1: AA passes, AAA passes, large text passes

About mist-200

Read as numbers, mist-200 is lightness 92.5%, chroma 0.005 and hue 214.3 degrees; read by eye, it is a pale cool gray. Its neighbors on the mist scale are mist-100, 3.8 points lighter, and mist-300, 5.3 points darker.

HSL and OKLCH agree on how light it is, 90% and 92.5%. No gamut mapping is needed here: oklch(92.5% 0.005 214.3) sits inside sRGB and #e3e7e8 matches it.

Black on mist-200 reads at 16.86:1, enough for AAA body text; white reaches 1.25:1 and should stay off it. Black text passes on every mist shade from mist-50 to mist-500, 3 shades darker than mist-200.

Of the named colors, lavender (#e6e6fa) is the nearest, 0.026 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #fbfbfb
  2. #f8f6f7
  3. #f4f2f2
  4. #f0eeee
  5. #ede9ea
  6. #e3e7e8
  7. #b7b3b4
  8. #878485
  9. #5a5859
  10. #313030
  11. #0c0c0c

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. #e3e7e8
  2. #da4b72
  3. #320914
  4. #83d4ff
  5. #506900

Around mist-200 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #da4b72, #320914, #83d4ff, #506900, drawn from a seed fixed by its hex. Open it in Recolor.

Using mist-200

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

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

Common questions

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

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

Is Tailwind mist-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mist-200: oklch(92.5% 0.005 214.3); #e3e7e8 is its conversion to sRGB.

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

No. The nearest CSS named color is lavender (#e6e6fa), 0.026 away in OKLab.

Sources