RecolorOpen Recolor

A medium cool gray, black and white text both pass AA

Tailwind mist-500

The hex code of Tailwind mist-500 is #67787c (rgb(103 120 124)), from its Tailwind CSS 4.3.3 value oklch(56% 0.021 213.5). White text on it reaches 4.61:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#67787cmist-500
From the theme file of Tailwind CSS 4.3.3 (--color-mist-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(56% 0.021 213.5)
Hex#67787c
RGBrgb(103 120 124)
HSLhsl(191 9% 45%)
CSS variablevar(--color-mist-500)
Nearest CSS nameslategray #708090, 0.037 away in OKLab
White text4.61:1: AA passes, AAA fails, large text passes
Black text4.55:1: AA passes, AAA fails, large text passes

About mist-500

Read as numbers, mist-500 is lightness 56.0%, chroma 0.021 and hue 213.5 degrees; read by eye, it is a medium cool gray. Its neighbors on the mist scale are mist-400, 16.3 points lighter, and mist-600, 11.0 points darker.

Its lightness is 45% in HSL and 56.0% in OKLCH, 11 points apart; only the second tracks how light it looks. No gamut mapping is needed here: oklch(56% 0.021 213.5) sits inside sRGB and #67787c matches it.

Either ink works for body text on mist-500: black measures 4.55:1 and white 4.61:1, both just over the AA line of 4.5:1. On the mist scale this is the one shade that suits both inks; a step lighter only black works, a step darker only white.

Of the named colors, slategray (#708090) is the nearest, 0.037 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #e4e7e8
  2. #cad0d1
  3. #b0b9bb
  4. #97a3a6
  5. #7f8d91
  6. #67787c
  7. #4f5d60
  8. #384345
  9. #232a2c
  10. #101415
  11. #020303

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. #67787c
  2. #f0d1ff
  3. #3a1f05
  4. #94d1c7
  5. #5a487d

Around mist-500 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #f0d1ff, #3a1f05, #94d1c7, #5a487d, drawn from a seed fixed by its hex. Open it in Recolor.

Using mist-500

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

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

Common questions

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

Yes. White text measures 4.61:1 on mist-500, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind mist-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mist-500: oklch(56% 0.021 213.5); #67787c is its conversion to sRGB.

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

No. The nearest CSS named color is slategray (#708090), 0.037 away in OKLab.

Sources