RecolorOpen Recolor

A light reddish gray, black text passes AA

Tailwind taupe-300

In Tailwind CSS 4.3.3, taupe-300 is defined as oklch(86.8% 0.007 39.5); in hex that is #d8d2d0, or rgb(216 210 208). Black text on it reaches 14.05:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#d8d2d0taupe-300
From the theme file of Tailwind CSS 4.3.3 (--color-taupe-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(86.8% 0.007 39.5)
Hex#d8d2d0
RGBrgb(216 210 208)
HSLhsl(15 9% 83%)
CSS variablevar(--color-taupe-300)
Nearest CSS namelightgray #d3d3d3, 0.007 away in OKLab
White text1.49:1: AA fails, AAA fails, large text fails
Black text14.05:1: AA passes, AAA passes, large text passes

About taupe-300

In OKLCH, taupe-300 has a lightness of 86.8%, a chroma of 0.007 and a hue of 39.5 degrees, which makes it a light reddish gray. The step up to taupe-200 is 5.4 points of lightness, and the step down to taupe-400 15.4 points.

HSL and OKLCH agree on how light it is, 83% and 86.8%. The value lies inside sRGB, the gamut of a hex code, so taupe-300 converts to #d8d2d0 without losing chroma.

For text, taupe-300 wants black: 14.05:1 clears even AAA's 7:1, and white at 1.49:1 fails AA. Black text passes on every taupe shade from taupe-50 to taupe-400, 1 shade darker than taupe-300.

Its nearest CSS named color, lightgray (#d3d3d3), is 0.007 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #f8f7f8
  2. #f2f0f0
  3. #ebe8e9
  4. #e5e1e2
  5. #ded9da
  6. #d8d2d0
  7. #a9a4a5
  8. #7c797a
  9. #535051
  10. #2c2b2b
  11. #0a0a0a

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. #d8d2d0
  2. #12634c
  3. #e8b298
  4. #1a2421
  5. #816ebe

Locked as the first of five swatches, taupe-300 gets #12634c, #e8b298, #1a2421, #816ebe from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using taupe-300

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

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

Common questions

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

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

Is Tailwind taupe-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-taupe-300: oklch(86.8% 0.007 39.5); #d8d2d0 is its conversion to sRGB.

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

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

Sources