RecolorOpen Recolor

A dark cool gray, white text passes AA

Tailwind mist-600

Tailwind mist-600 is oklch(45% 0.017 213.2) in Tailwind CSS 4.3.3, which is #4b585b in hex and rgb(75 88 91). White text on it reaches 7.38:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#4b585bmist-600
From the theme file of Tailwind CSS 4.3.3 (--color-mist-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(45% 0.017 213.2)
Hex#4b585b
RGBrgb(75 88 91)
HSLhsl(191 10% 33%)
CSS variablevar(--color-mist-600)
Nearest CSS namedarkslategray #2f4f4f, 0.052 away in OKLab
White text7.38:1: AA passes, AAA passes, large text passes
Black text2.85:1: AA fails, AAA fails, large text fails

About mist-600

Tailwind mist-600 is a dark cool gray: OKLCH lightness 45.0%, chroma 0.017, hue 213.2 degrees. On Tailwind's mist scale it sits between mist-500 at 56.0% and mist-700 at 37.8%.

HSL calls its lightness 33%, OKLCH 45.0%: 12 points between a formula and a measure of what the eye sees. Its value fits inside sRGB, so #4b585b is the same color, not an approximation.

White text on mist-600 measures 7.38:1, past the 7:1 of WCAG AAA, while black text manages only 2.85:1. White text passes on every mist shade from mist-500 down, so mist-600 is 1 shade past the line.

The nearest CSS named color, darkslategray (#2f4f4f), is 0.052 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #e2e0e0
  2. #c6c1c3
  3. #aba4a6
  4. #90878a
  5. #776c6f
  6. #4b585b
  7. #483e41
  8. #332c2e
  9. #1f1a1c
  10. #0d0a0b
  11. #020101

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. #4b585b
  2. #cdcbad
  3. #232501
  4. #ebf4d9
  5. #558e3a

Recolor's generator, with mist-600 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #cdcbad, #232501, #ebf4d9, #558e3a. Open it in Recolor.

Using mist-600

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

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

Common questions

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

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

Is Tailwind mist-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mist-600: oklch(45% 0.017 213.2); #4b585b is its conversion to sRGB.

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

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

Sources