RecolorOpen Recolor

A medium cool gray, black text passes AA

Tailwind mist-400

In Tailwind CSS 4.3.3, mist-400 is defined as oklch(72.3% 0.014 214.4); in hex that is #9ca8ab, or rgb(156 168 171). Black text on it reaches 8.60:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#9ca8abmist-400
From the theme file of Tailwind CSS 4.3.3 (--color-mist-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(72.3% 0.014 214.4)
Hex#9ca8ab
RGBrgb(156 168 171)
HSLhsl(192 8% 64%)
CSS variablevar(--color-mist-400)
Nearest CSS namedarkgray #a9a9a9, 0.019 away in OKLab
White text2.44:1: AA fails, AAA fails, large text fails
Black text8.60:1: AA passes, AAA passes, large text passes

About mist-400

In OKLCH, mist-400 has a lightness of 72.3%, a chroma of 0.014 and a hue of 214.4 degrees, which makes it a medium cool gray. The step up to mist-300 is 14.9 points of lightness, and the step down to mist-500 16.3 points.

HSL calls its lightness 64%, OKLCH 72.3%: 8 points between a formula and a measure of what the eye sees. The value lies inside sRGB, the gamut of a hex code, so mist-400 converts to #9ca8ab without losing chroma.

For text, mist-400 wants black: 8.60:1 clears even AAA's 7:1, and white at 2.44:1 fails AA. Black text passes on every mist shade from mist-50 to mist-500, 1 shade darker than mist-400.

Its nearest CSS named color, darkgray (#a9a9a9), is 0.019 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #f1eff0
  2. #e3dfe0
  3. #d6d0d1
  4. #c8c0c2
  5. #bbb1b3
  6. #9ca8ab
  7. #877e81
  8. #635c5e
  9. #413c3d
  10. #221f1f
  11. #060606

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. #9ca8ab
  2. #2b1b0a
  3. #9a775f
  4. #d8f0eb
  5. #625674

Locked as the first of five swatches, mist-400 gets #2b1b0a, #9a775f, #d8f0eb, #625674 from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using mist-400

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

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

Common questions

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

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

Is Tailwind mist-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mist-400: oklch(72.3% 0.014 214.4); #9ca8ab is its conversion to sRGB.

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

Yes, nearly: darkgray (#a9a9a9) is 0.019 away in OKLab, too close to tell apart by eye.

Sources