RecolorOpen Recolor

A vivid light yellow, black text passes AA

Tailwind yellow-500

The hex code of Tailwind yellow-500 is #efb100 (rgb(239 177 0)), from its Tailwind CSS 4.3.3 value oklch(79.5% 0.184 86.047). Black text on it reaches 10.96:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#efb100yellow-500
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(79.5% 0.184 86.047)
Hex#efb100, the nearest color in sRGB
RGBrgb(239 177 0)
HSLhsl(44 100% 47%)
OKLCH of the hexoklch(79.7% 0.164 83.1)
CSS variablevar(--color-yellow-500)
Nearest CSS nameorange #ffa500, 0.037 away in OKLab
White text1.92:1: AA fails, AAA fails, large text fails
Black text10.96:1: AA passes, AAA passes, large text passes

About yellow-500

Read as numbers, yellow-500 is lightness 79.5%, chroma 0.184 and hue 86.0 degrees; read by eye, it is a vivid light yellow. Its neighbors on the yellow scale are yellow-400, 5.7 points lighter, and yellow-600, 11.4 points darker.

HSL puts its lightness at 47% and OKLCH at 79.5%, 33 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. A hex code cannot hold yellow-500 exactly: the value is outside sRGB, and #efb100 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.020, 0.2 points of lightness and 2.9 degrees of hue away from the value.

Black on yellow-500 reads at 10.96:1, enough for AAA body text; white reaches 1.92:1 and should stay off it. Black text passes on every yellow shade from yellow-50 to yellow-600, 1 shade darker than yellow-500.

Of the named colors, orange (#ffa500) is the nearest, 0.037 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #fdf3e0
  2. #fbe6c0
  3. #f8d99f
  4. #f5cc7c
  5. #f2bf53
  6. #efb100
  7. #bb8a00
  8. #8a6500
  9. #5c4200
  10. #322200
  11. #0d0700

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. #efb100
  2. #644e18
  3. #d7f3ff
  4. #18232a
  5. #aa8343

Around yellow-500 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #644e18, #d7f3ff, #18232a, #aa8343, drawn from a seed fixed by its hex. Open it in Recolor.

Using yellow-500

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

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

Common questions

Does white text pass WCAG AA on Tailwind yellow-500?

No. White text measures 1.92:1 on yellow-500, under AA's 4.5:1; black text measures 10.96:1 and passes. The lightest yellow shade for white text is yellow-700.

Is Tailwind yellow-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-500: oklch(79.5% 0.184 86.047); #efb100 is its nearest sRGB color, since the value lies outside sRGB.

Is there a CSS named color for Tailwind yellow-500?

No. The nearest CSS named color is orange (#ffa500), 0.037 away in OKLab.

Sources