RecolorOpen Recolor

A very dark cool gray, white text passes AA

Tailwind mist-900

Tailwind mist-900 is oklch(21.8% 0.008 223.9) in Tailwind CSS 4.3.3, which is #161b1d in hex and rgb(22 27 29). White text on it reaches 17.38:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#161b1dmist-900
From the theme file of Tailwind CSS 4.3.3 (--color-mist-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(21.8% 0.008 223.9)
Hex#161b1d
RGBrgb(22 27 29)
HSLhsl(197 14% 10%)
CSS variablevar(--color-mist-900)
Nearest CSS namemidnightblue #191970, 0.155 away in OKLab
White text17.38:1: AA passes, AAA passes, large text passes
Black text1.21:1: AA fails, AAA fails, large text fails

About mist-900

Tailwind mist-900 is a very dark cool gray: OKLCH lightness 21.8%, chroma 0.008, hue 223.9 degrees. On Tailwind's mist scale it sits between mist-800 at 27.5% and mist-950 at 14.8%.

Its lightness is 10% in HSL and 21.8% in OKLCH, 12 points apart; only the second tracks how light it looks. Its value fits inside sRGB, so #161b1d is the same color, not an approximation.

White text on mist-900 measures 17.38:1, past the 7:1 of WCAG AAA, while black text manages only 1.21:1. On the mist scale white text works from mist-500 to mist-950; mist-900 has 4 shades of margin.

CSS has no keyword in its neighborhood; midnightblue (#191970) is the nearest, a long 0.155 away in OKLab.

Tints and shades

  1. #d5d4d4
  2. #acaaaa
  3. #858283
  4. #605c5d
  5. #3d393a
  6. #161b1d
  7. #151112
  8. #0c090a
  9. #050404
  10. #020101

From light to dark: 5 toward white and 4 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. #161b1d
  2. #e3afa3
  3. #605179
  4. #dbe3ff
  5. #729d8e

Recolor's generator, with mist-900 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #e3afa3, #605179, #dbe3ff, #729d8e. Open it in Recolor.

Using mist-900

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

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

Common questions

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

Yes. White text measures 17.38:1 on mist-900, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind mist-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mist-900: oklch(21.8% 0.008 223.9); #161b1d is its conversion to sRGB.

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

No. The nearest CSS named color is midnightblue (#191970), 0.155 away in OKLab.

Sources