RecolorOpen Recolor

A light cool gray, black text passes AA

Tailwind mist-300

Tailwind mist-300 is oklch(87.2% 0.007 219.6) in Tailwind CSS 4.3.3, which is #d0d6d8 in hex and rgb(208 214 216). Black text on it reaches 14.29:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#d0d6d8mist-300
From the theme file of Tailwind CSS 4.3.3 (--color-mist-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(87.2% 0.007 219.6)
Hex#d0d6d8
RGBrgb(208 214 216)
HSLhsl(195 9% 83%)
CSS variablevar(--color-mist-300)
Nearest CSS namelightgray #d3d3d3, 0.009 away in OKLab
White text1.47:1: AA fails, AAA fails, large text fails
Black text14.29:1: AA passes, AAA passes, large text passes

About mist-300

Tailwind mist-300 is a light cool gray: OKLCH lightness 87.2%, chroma 0.007, hue 219.6 degrees. On Tailwind's mist scale it sits between mist-200 at 92.5% and mist-400 at 72.3%.

Here HSL's lightness, 83%, lands near OKLCH's 87.2%, which is not true of every color. Its value fits inside sRGB, so #d0d6d8 is the same color, not an approximation.

Black text on mist-300 measures 14.29:1, past the 7:1 of WCAG AAA, while white text manages only 1.47:1. On the mist scale black text works down to mist-500, which leaves mist-300 2 shades of margin.

The CSS keyword lightgray (#d3d3d3) is almost the same color: 0.009 apart in OKLab, under the step most people notice.

Tints and shades

  1. #f9f8f8
  2. #f2f0f1
  3. #ece9ea
  4. #e6e1e3
  5. #dfdadb
  6. #d0d6d8
  7. #aaa5a6
  8. #7d797a
  9. #535151
  10. #2d2b2b
  11. #0b0a0a

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. #d0d6d8
  2. #305e30
  3. #d9b4e3
  4. #2b202e
  5. #9c6fb6

Recolor's generator, with mist-300 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #305e30, #d9b4e3, #2b202e, #9c6fb6. Open it in Recolor.

Using mist-300

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

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

Common questions

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

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

Is Tailwind mist-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mist-300: oklch(87.2% 0.007 219.6); #d0d6d8 is its conversion to sRGB.

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

Yes, nearly: lightgray (#d3d3d3) is 0.009 away in OKLab, too close to tell apart by eye.

Sources