RecolorOpen Recolor

A very dark yellowish gray, white text passes AA

Tailwind olive-900

The hex code of Tailwind olive-900 is #1d1d16 (rgb(29 29 22)), from its Tailwind CSS 4.3.3 value oklch(22.8% 0.013 107.4). White text on it reaches 16.94:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#1d1d16olive-900
From the theme file of Tailwind CSS 4.3.3 (--color-olive-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(22.8% 0.013 107.4)
Hex#1d1d16
RGBrgb(29 29 22)
HSLhsl(60 14% 10%)
CSS variablevar(--color-olive-900)
Nearest CSS namemidnightblue #191970, 0.167 away in OKLab
White text16.94:1: AA passes, AAA passes, large text passes
Black text1.24:1: AA fails, AAA fails, large text fails

About olive-900

Read as numbers, olive-900 is lightness 22.8%, chroma 0.013 and hue 107.4 degrees; read by eye, it is a very dark yellowish gray. Its neighbors on the olive scale are olive-800, 5.8 points lighter, and olive-950, 7.5 points darker.

HSL calls its lightness 10%, OKLCH 22.8%: 13 points between a formula and a measure of what the eye sees. No gamut mapping is needed here: oklch(22.8% 0.013 107.4) sits inside sRGB and #1d1d16 matches it.

White on olive-900 reads at 16.94:1, enough for AAA body text; black reaches 1.24:1 and should stay off it. White text passes on every olive shade from olive-600 down, so olive-900 is 3 shades past the line.

No CSS named color comes near it: the closest, midnightblue (#191970), is 0.167 away in OKLab.

Tints and shades

  1. #d6d4d4
  2. #aeaaab
  3. #888384
  4. #645d5f
  5. #413a3c
  6. #1d1d16
  7. #181214
  8. #0f0a0b
  9. #070405
  10. #020101

From light to dark: 5 toward white and 4 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. #1d1d16
  2. #cdb9f2
  3. #006642
  4. #ffe7ce
  5. #b17b00

Around olive-900 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #cdb9f2, #006642, #ffe7ce, #b17b00, drawn from a seed fixed by its hex. Open it in Recolor.

Using olive-900

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

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

Common questions

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

Yes. White text measures 16.94:1 on olive-900, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind olive-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-olive-900: oklch(22.8% 0.013 107.4); #1d1d16 is its conversion to sRGB.

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

No. The nearest CSS named color is midnightblue (#191970), 0.167 away in OKLab.

Sources