RecolorOpen Recolor

A dark yellowish gray, white text passes AA

Tailwind olive-600

The hex code of Tailwind olive-600 is #5b5b4b (rgb(91 91 75)), from its Tailwind CSS 4.3.3 value oklch(46.6% 0.025 107.3). White text on it reaches 6.90:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#5b5b4bolive-600
From the theme file of Tailwind CSS 4.3.3 (--color-olive-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(46.6% 0.025 107.3)
Hex#5b5b4b
RGBrgb(91 91 75)
HSLhsl(60 10% 33%)
CSS variablevar(--color-olive-600)
Nearest CSS namedimgray #696969, 0.060 away in OKLab
White text6.90:1: AA passes, AAA fails, large text passes
Black text3.04:1: AA fails, AAA fails, large text passes

About olive-600

Read as numbers, olive-600 is lightness 46.6%, chroma 0.025 and hue 107.3 degrees; read by eye, it is a dark yellowish gray. Its neighbors on the olive scale are olive-500, 11.4 points lighter, and olive-700, 7.2 points darker.

Its lightness is 33% in HSL and 46.6% in OKLCH, 14 points apart; only the second tracks how light it looks. No gamut mapping is needed here: oklch(46.6% 0.025 107.3) sits inside sRGB and #5b5b4b matches it.

White is the ink for olive-600: 6.90:1 passes AA for body text, where black stops at 3.04:1. Going down the olive scale, white text first reaches AA here; one shade lighter, olive-500 gives it 4.25:1.

No CSS keyword matches it; dimgray (#696969) is the nearest, 0.060 away in OKLab, a clear step off.

Tints and shades

  1. #e2e2df
  2. #c5c5bf
  3. #a9a9a0
  4. #8e8e83
  5. #747466
  6. #5b5b4b
  7. #464639
  8. #313128
  9. #1e1e17
  10. #0d0d09
  11. #020201

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. #5b5b4b
  2. #9fcdb2
  3. #00271b
  4. #009f97
  5. #88edff

Around olive-600 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #9fcdb2, #00271b, #009f97, #88edff, drawn from a seed fixed by its hex. Open it in Recolor.

Using olive-600

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

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

Common questions

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

Yes. White text measures 6.90:1 on olive-600, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind olive-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-olive-600: oklch(46.6% 0.025 107.3); #5b5b4b is its conversion to sRGB.

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

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

Sources