RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind mist-100

In Tailwind CSS 4.3.3, mist-100 is defined as oklch(96.3% 0.002 197.1); in hex that is #f1f3f3, or rgb(241 243 243). Black text on it reaches 18.85:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#f1f3f3mist-100
From the theme file of Tailwind CSS 4.3.3 (--color-mist-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.3% 0.002 197.1)
Hex#f1f3f3
RGBrgb(241 243 243)
HSLhsl(180 8% 95%)
CSS variablevar(--color-mist-100)
Nearest CSS namewhitesmoke #f5f5f5, 0.008 away in OKLab
White text1.11:1: AA fails, AAA fails, large text fails
Black text18.85:1: AA passes, AAA passes, large text passes

About mist-100

In OKLCH, mist-100 has a lightness of 96.3%, a chroma of 0.002 and a hue of 197.1 degrees, which makes it a pale gray. The step up to mist-50 is 2.4 points of lightness, and the step down to mist-200 3.8 points.

Here HSL's lightness, 95%, lands near OKLCH's 96.3%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so mist-100 converts to #f1f3f3 without losing chroma.

For text, mist-100 wants black: 18.85:1 clears even AAA's 7:1, and white at 1.11:1 fails AA. On the mist scale black text works down to mist-500, which leaves mist-100 4 shades of margin.

The CSS keyword whitesmoke (#f5f5f5) is almost the same color: 0.008 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fdfdfd
  2. #fbfbfb
  3. #f9f8f9
  4. #f8f6f7
  5. #f6f4f5
  6. #f1f3f3
  7. #bfbebe
  8. #8d8c8c
  9. #5e5e5e
  10. #333333
  11. #0d0d0d

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. #f1f3f3
  2. #3a5a53
  3. #faafb3
  4. #2e2500
  5. #a265a3

Locked as the first of five swatches, mist-100 gets #3a5a53, #faafb3, #2e2500, #a265a3 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-100

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

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

Common questions

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

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

Is Tailwind mist-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mist-100: oklch(96.3% 0.002 197.1); #f1f3f3 is its conversion to sRGB.

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

Yes, nearly: whitesmoke (#f5f5f5) is 0.008 away in OKLab, too close to tell apart by eye.

Sources