RecolorOpen Recolor

A bright yellow, black text passes AA

Tailwind yellow-300

Tailwind yellow-300 is oklch(90.5% 0.182 98.111) in Tailwind CSS 4.3.3, which is #ffdf20 as the nearest sRGB hex and rgb(255 223 32). Black text on it reaches 15.83:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ffdf20yellow-300
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(90.5% 0.182 98.111)
Hex#ffdf20, the nearest color in sRGB
RGBrgb(255 223 32)
HSLhsl(51 100% 56%)
OKLCH of the hexoklch(90.3% 0.182 98.3)
CSS variablevar(--color-yellow-300)
Nearest CSS namegold #ffd700, 0.019 away in OKLab
White text1.33:1: AA fails, AAA fails, large text fails
Black text15.83:1: AA passes, AAA passes, large text passes

About yellow-300

Tailwind yellow-300 is a bright yellow: OKLCH lightness 90.5%, chroma 0.182, hue 98.1 degrees. On Tailwind's yellow scale it sits between yellow-200 at 94.5% and yellow-400 at 85.2%.

HSL puts its lightness at 56% and OKLCH at 90.5%, 34 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Its value lies outside sRGB, the colors a hex code can name: #ffdf20 is what CSS Color 4's gamut mapping makes of it, chroma 0.182 instead of 0.182, moving 0.2 points of lightness and 0.2 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on yellow-300 measures 15.83:1, past the 7:1 of WCAG AAA, while white text manages only 1.33:1. Black text passes on every yellow shade from yellow-50 to yellow-600, 3 shades darker than yellow-300.

Its nearest CSS named color, gold (#ffd700), is 0.019 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffbe4
  2. #fff6c7
  3. #fff0a9
  4. #ffeb89
  5. #ffe562
  6. #ffdf20
  7. #c8af17
  8. #94810e
  9. #635606
  10. #362e02
  11. #0f0b00

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. #ffdf20
  2. #7f7c5c
  3. #27220b
  4. #c4bda4
  5. #615e44

Recolor's generator, with yellow-300 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #7f7c5c, #27220b, #c4bda4, #615e44. Open it in Recolor.

Using yellow-300

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

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

Common questions

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

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

Is Tailwind yellow-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-300: oklch(90.5% 0.182 98.111); #ffdf20 is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: gold (#ffd700) is 0.019 away in OKLab, too close to tell apart by eye.

Sources