RecolorOpen Recolor

A light yellowish gray, black text passes AA

Tailwind olive-300

The hex code of Tailwind olive-300 is #d8d8d0 (rgb(216 216 208)), from its Tailwind CSS 4.3.3 value oklch(88% 0.011 106.6). Black text on it reaches 14.65:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#d8d8d0olive-300
From the theme file of Tailwind CSS 4.3.3 (--color-olive-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(88% 0.011 106.6)
Hex#d8d8d0
RGBrgb(216 216 208)
HSLhsl(60 9% 83%)
CSS variablevar(--color-olive-300)
Nearest CSS namelightgray #d3d3d3, 0.017 away in OKLab
White text1.43:1: AA fails, AAA fails, large text fails
Black text14.65:1: AA passes, AAA passes, large text passes

About olive-300

Read as numbers, olive-300 is lightness 88.0%, chroma 0.011 and hue 106.6 degrees; read by eye, it is a light yellowish gray. Its neighbors on the olive scale are olive-200, 5.0 points lighter, and olive-400, 14.3 points darker.

HSL and OKLCH agree on how light it is, 83% and 88.0%. No gamut mapping is needed here: oklch(88% 0.011 106.6) sits inside sRGB and #d8d8d0 matches it.

Black on olive-300 reads at 14.65:1, enough for AAA body text; white reaches 1.43:1 and should stay off it. Black text passes on every olive shade from olive-50 to olive-500, 2 shades darker than olive-300.

Its nearest CSS named color, lightgray (#d3d3d3), is 0.017 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #f9f8f8
  2. #f4f1f2
  3. #eeeaeb
  4. #e9e3e4
  5. #e3dcde
  6. #d8d8d0
  7. #aea6a8
  8. #807a7c
  9. #555152
  10. #2e2b2c
  11. #0b0a0a

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. #d8d8d0
  2. #743b58
  3. #eb9fbf
  4. #0e2921
  5. #5b9479

Around olive-300 as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #743b58, #eb9fbf, #0e2921, #5b9479, drawn from a seed fixed by its hex. Open it in Recolor.

Using olive-300

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

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

Common questions

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

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

Is Tailwind olive-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-olive-300: oklch(88% 0.011 106.6); #d8d8d0 is its conversion to sRGB.

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

Yes, nearly: lightgray (#d3d3d3) is 0.017 away in OKLab, too close to tell apart by eye.

Sources