RecolorOpen Recolor

A medium yellowish gray, black text passes AA

Tailwind olive-400

Tailwind olive-400 is oklch(73.7% 0.021 106.9) in Tailwind CSS 4.3.3, which is #abab9c in hex and rgb(171 171 156). Black text on it reaches 9.04:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#abab9colive-400
From the theme file of Tailwind CSS 4.3.3 (--color-olive-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(73.7% 0.021 106.9)
Hex#abab9c
RGBrgb(171 171 156)
HSLhsl(60 8% 64%)
CSS variablevar(--color-olive-400)
Nearest CSS namedarkgray #a9a9a9, 0.021 away in OKLab
White text2.32:1: AA fails, AAA fails, large text fails
Black text9.04:1: AA passes, AAA passes, large text passes

About olive-400

Tailwind olive-400 is a medium yellowish gray: OKLCH lightness 73.7%, chroma 0.021, hue 106.9 degrees. On Tailwind's olive scale it sits between olive-300 at 88.0% and olive-500 at 58.0%.

Its lightness is 64% in HSL and 73.7% in OKLCH, 10 points apart; only the second tracks how light it looks. Its value fits inside sRGB, so #abab9c is the same color, not an approximation.

Black text on olive-400 measures 9.04:1, past the 7:1 of WCAG AAA, while white text manages only 2.32:1. On the olive scale black text works down to olive-500, which leaves olive-400 1 shade of margin.

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

Tints and shades

  1. #f1f1ee
  2. #e2e2dd
  3. #d4d4cc
  4. #c6c6bc
  5. #b9b9ac
  6. #abab9c
  7. #858579
  8. #616158
  9. #404039
  10. #21211d
  11. #060605

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. #abab9c
  2. #2f5d61
  3. #ffeecb
  4. #2b1f00
  5. #7a74b5

Recolor's generator, with olive-400 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #2f5d61, #ffeecb, #2b1f00, #7a74b5. Open it in Recolor.

Using olive-400

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

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

Common questions

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

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

Is Tailwind olive-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-olive-400: oklch(73.7% 0.021 106.9); #abab9c is its conversion to sRGB.

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

No. The nearest CSS named color is darkgray (#a9a9a9), 0.021 away in OKLab.

Sources