RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind olive-50

The hex code of Tailwind olive-50 is #fbfbf9 (rgb(251 251 249)), from its Tailwind CSS 4.3.3 value oklch(98.8% 0.003 106.5). Black text on it reaches 20.27:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#fbfbf9olive-50
From the theme file of Tailwind CSS 4.3.3 (--color-olive-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.8% 0.003 106.5)
Hex#fbfbf9
RGBrgb(251 251 249)
HSLhsl(60 20% 98%)
CSS variablevar(--color-olive-50)
Nearest CSS namesnow #fffafa, 0.006 away in OKLab
White text1.04:1: AA fails, AAA fails, large text fails
Black text20.27:1: AA passes, AAA passes, large text passes

About olive-50

Read as numbers, olive-50 is lightness 98.8%, chroma 0.003 and hue 106.5 degrees; read by eye, it is a pale gray. As the first of the eleven olive shades it sits closest to white, 1.2 points below it and 2.2 points above olive-100.

Here HSL's lightness, 98%, lands near OKLCH's 98.8%, which is not true of every color. No gamut mapping is needed here: oklch(98.8% 0.003 106.5) sits inside sRGB and #fbfbf9 matches it.

Black on olive-50 reads at 20.27:1, enough for AAA body text; white reaches 1.04:1 and should stay off it. On the olive scale black text works down to olive-500, which leaves olive-50 5 shades of margin.

The CSS keyword snow (#fffafa) is almost the same color: 0.006 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffefe
  2. #fefdfe
  3. #fefdfd
  4. #fdfcfc
  5. #fdfbfb
  6. #fbfbf9
  7. #c6c4c5
  8. #939191
  9. #626161
  10. #353535
  11. #0e0e0e

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. #fbfbf9
  2. #7d4d00
  3. #fbb0b5
  4. #3f1b23
  5. #0f88a5

Around olive-50 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #7d4d00, #fbb0b5, #3f1b23, #0f88a5, drawn from a seed fixed by its hex. Open it in Recolor.

Using olive-50

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

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

Common questions

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

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

Is Tailwind olive-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-olive-50: oklch(98.8% 0.003 106.5); #fbfbf9 is its conversion to sRGB.

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

Yes, nearly: snow (#fffafa) is 0.006 away in OKLab, too close to tell apart by eye.

Sources