RecolorOpen Recolor

A dark cool gray, white text passes AA

Tailwind mist-700

In Tailwind CSS 4.3.3, mist-700 is defined as oklch(37.8% 0.015 216); in hex that is #394447, or rgb(57 68 71). White text on it reaches 10.04:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#394447mist-700
From the theme file of Tailwind CSS 4.3.3 (--color-mist-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(37.8% 0.015 216)
Hex#394447
RGBrgb(57 68 71)
HSLhsl(193 11% 25%)
CSS variablevar(--color-mist-700)
Nearest CSS namedarkslategray #2f4f4f, 0.035 away in OKLab
White text10.04:1: AA passes, AAA passes, large text passes
Black text2.09:1: AA fails, AAA fails, large text fails

About mist-700

In OKLCH, mist-700 has a lightness of 37.8%, a chroma of 0.015 and a hue of 216.0 degrees, which makes it a dark cool gray. The step up to mist-600 is 7.2 points of lightness, and the step down to mist-800 10.3 points.

Its lightness is 25% in HSL and 37.8% in OKLCH, 13 points apart; only the second tracks how light it looks. The value lies inside sRGB, the gamut of a hex code, so mist-700 converts to #394447 without losing chroma.

For text, mist-700 wants white: 10.04:1 clears even AAA's 7:1, and black at 2.09:1 fails AA. On the mist scale white text works from mist-500 to mist-950; mist-700 has 2 shades of margin.

Among the CSS keywords, darkslategray (#2f4f4f) comes closest at 0.035 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #dedcdd
  2. #bebabb
  3. #9f999b
  4. #81797b
  5. #655b5e
  6. #394447
  7. #372f31
  8. #262022
  9. #171213
  10. #080607
  11. #010101

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. #394447
  2. #b7ba7d
  3. #16221c
  4. #cdf7ff
  5. #a968c5

Locked as the first of five swatches, mist-700 gets #b7ba7d, #16221c, #cdf7ff, #a968c5 from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using mist-700

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

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

Common questions

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

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

Is Tailwind mist-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mist-700: oklch(37.8% 0.015 216); #394447 is its conversion to sRGB.

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

No. The nearest CSS named color is darkslategray (#2f4f4f), 0.035 away in OKLab.

Sources