RecolorOpen Recolor

A yellowish white, black text passes AA

Tailwind olive-100

Tailwind olive-100 is oklch(96.6% 0.005 106.5) in Tailwind CSS 4.3.3, which is #f4f4f0 in hex and rgb(244 244 240). Black text on it reaches 19.05:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#f4f4f0olive-100
From the theme file of Tailwind CSS 4.3.3 (--color-olive-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.6% 0.005 106.5)
Hex#f4f4f0
RGBrgb(244 244 240)
HSLhsl(60 15% 95%)
CSS variablevar(--color-olive-100)
Nearest CSS namewhitesmoke #f5f5f5, 0.007 away in OKLab
White text1.10:1: AA fails, AAA fails, large text fails
Black text19.05:1: AA passes, AAA passes, large text passes

About olive-100

Tailwind olive-100 is a yellowish white: OKLCH lightness 96.6%, chroma 0.005, hue 106.5 degrees. On Tailwind's olive scale it sits between olive-50 at 98.8% and olive-200 at 93.0%.

HSL and OKLCH agree on how light it is, 95% and 96.6%. Its value fits inside sRGB, so #f4f4f0 is the same color, not an approximation.

Black text on olive-100 measures 19.05:1, past the 7:1 of WCAG AAA, while white text manages only 1.10:1. Black text passes on every olive shade from olive-50 to olive-500, 4 shades darker than olive-100.

Its nearest CSS named color, whitesmoke (#f5f5f5), is 0.007 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fefdfd
  2. #fcfbfb
  3. #fbf9f9
  4. #faf7f7
  5. #f8f4f5
  6. #f4f4f0
  7. #c2bebf
  8. #8f8c8d
  9. #605e5e
  10. #343333
  11. #0e0d0d

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. #f4f4f0
  2. #68416d
  3. #c6c8a8
  4. #131d2d
  5. #7f7f3d

Recolor's generator, with olive-100 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #68416d, #c6c8a8, #131d2d, #7f7f3d. Open it in Recolor.

Using olive-100

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

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

Common questions

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

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

Is Tailwind olive-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-olive-100: oklch(96.6% 0.005 106.5); #f4f4f0 is its conversion to sRGB.

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

Yes, nearly: whitesmoke (#f5f5f5) is 0.007 away in OKLab, too close to tell apart by eye.

Sources