RecolorOpen Recolor

A medium reddish gray, white text passes AA

Tailwind taupe-500

Tailwind taupe-500 is oklch(54.7% 0.021 43.1) in Tailwind CSS 4.3.3, which is #7c6d67 in hex and rgb(124 109 103). White text on it reaches 4.95:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#7c6d67taupe-500
From the theme file of Tailwind CSS 4.3.3 (--color-taupe-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(54.7% 0.021 43.1)
Hex#7c6d67
RGBrgb(124 109 103)
HSLhsl(17 9% 45%)
CSS variablevar(--color-taupe-500)
Nearest CSS namedimgray #696969, 0.034 away in OKLab
White text4.95:1: AA passes, AAA fails, large text passes
Black text4.24:1: AA fails, AAA fails, large text passes

About taupe-500

Tailwind taupe-500 is a medium reddish gray: OKLCH lightness 54.7%, chroma 0.021, hue 43.1 degrees. On Tailwind's taupe scale it sits between taupe-400 at 71.4% and taupe-600 at 43.8%.

HSL calls its lightness 45%, OKLCH 54.7%: 10 points between a formula and a measure of what the eye sees. Its value fits inside sRGB, so #7c6d67 is the same color, not an approximation.

White text on taupe-500 reaches 4.95:1, enough for WCAG AA body text but short of AAA's 7:1; black text gets 4.24:1. It is the lightest taupe shade that carries white body text; taupe-400 falls short at 2.55:1.

The closest CSS named color is dimgray (#696969), 0.034 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #e8e5e4
  2. #d2ccca
  3. #bcb3b0
  4. #a69b97
  5. #91847f
  6. #7c6d67
  7. #60544f
  8. #453c38
  9. #2c2623
  10. #151110
  11. #030202

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. #7c6d67
  2. #002d2a
  3. #2ce4e7
  4. #336a70
  5. #d8f6ff

Recolor's generator, with taupe-500 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #002d2a, #2ce4e7, #336a70, #d8f6ff. Open it in Recolor.

Using taupe-500

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

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

Common questions

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

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

Is Tailwind taupe-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-taupe-500: oklch(54.7% 0.021 43.1); #7c6d67 is its conversion to sRGB.

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

No. The nearest CSS named color is dimgray (#696969), 0.034 away in OKLab.

Sources