RecolorOpen Recolor

A medium olive, black text passes AA

Tailwind olive-500

In Tailwind CSS 4.3.3, olive-500 is defined as oklch(58% 0.031 107.3); in hex that is #7c7c67, or rgb(124 124 103). Black text on it reaches 4.94:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#7c7c67olive-500
From the theme file of Tailwind CSS 4.3.3 (--color-olive-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(58% 0.031 107.3)
Hex#7c7c67
RGBrgb(124 124 103)
HSLhsl(60 9% 45%)
CSS variablevar(--color-olive-500)
Nearest CSS namegray #808080, 0.037 away in OKLab
White text4.25:1: AA fails, AAA fails, large text passes
Black text4.94:1: AA passes, AAA fails, large text passes

About olive-500

In OKLCH, olive-500 has a lightness of 58.0%, a chroma of 0.031 and a hue of 107.3 degrees, which makes it a medium olive. The step up to olive-400 is 15.7 points of lightness, and the step down to olive-600 11.4 points.

HSL calls its lightness 45%, OKLCH 58.0%: 13 points between a formula and a measure of what the eye sees. The value lies inside sRGB, the gamut of a hex code, so olive-500 converts to #7c7c67 without losing chroma.

With black text, olive-500 passes AA at 4.94:1. White text, at 4.25:1, does not. It is the darkest olive shade that still carries black body text; olive-600 drops to 3.04:1.

Among the CSS keywords, gray (#808080) comes closest at 0.037 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #e8e8e4
  2. #d1d2ca
  3. #bbbbb0
  4. #a6a697
  5. #91917f
  6. #7c7c67
  7. #60604f
  8. #454538
  9. #2c2c23
  10. #151510
  11. #030302

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. #7c7c67
  2. #bbe8ee
  3. #031e22
  4. #7ac7d7
  5. #00585f

Locked as the first of five swatches, olive-500 gets #bbe8ee, #031e22, #7ac7d7, #00585f from Recolor's generator, a monochromatic palette, one hue in five lightnesses. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using olive-500

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

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

Common questions

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

No. White text measures 4.25:1 on olive-500, under AA's 4.5:1; black text measures 4.94:1 and passes. The lightest olive shade for white text is olive-600.

Is Tailwind olive-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-olive-500: oklch(58% 0.031 107.3); #7c7c67 is its conversion to sRGB.

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

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

Sources