RecolorOpen Recolor

A vivid light yellow, black text passes AA

Tailwind amber-300

The hex code of Tailwind amber-300 is #ffd230 (rgb(255 210 48)), from its Tailwind CSS 4.3.3 value oklch(87.9% 0.169 91.605). Black text on it reaches 14.51:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ffd230amber-300
From the theme file of Tailwind CSS 4.3.3 (--color-amber-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(87.9% 0.169 91.605)
Hex#ffd230, the nearest color in sRGB
RGBrgb(255 210 48)
HSLhsl(47 100% 59%)
OKLCH of the hexoklch(87.8% 0.169 91.9)
CSS variablevar(--color-amber-300)
Nearest CSS namegold #ffd700, 0.019 away in OKLab
White text1.45:1: AA fails, AAA fails, large text fails
Black text14.51:1: AA passes, AAA passes, large text passes

About amber-300

Read as numbers, amber-300 is lightness 87.9%, chroma 0.169 and hue 91.6 degrees; read by eye, it is a vivid light yellow. Its neighbors on the amber scale are amber-200, 4.5 points lighter, and amber-400, 5.1 points darker.

Its HSL lightness, 59%, says little about how light amber-300 looks; OKLCH, made to match the eye, measures 87.9%, 28 points away. A hex code cannot hold amber-300 exactly: the value is outside sRGB, and #ffd230 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.000, 0.1 points of lightness and 0.3 degrees of hue away from the value.

Black on amber-300 reads at 14.51:1, enough for AAA body text; white reaches 1.45:1 and should stay off it. On the amber scale black text works down to amber-600, which leaves amber-300 3 shades of margin.

The CSS keyword gold (#ffd700) is almost the same color: 0.019 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fff8e4
  2. #fff1c7
  3. #ffeaaa
  4. #ffe28a
  5. #ffda65
  6. #ffd230
  7. #c8a423
  8. #947917
  9. #63500c
  10. #362b04
  11. #0f0a00

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. #ffd230
  2. #3f5e7a
  3. #88c1ec
  4. #372907
  5. #a78d1c

Around amber-300 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #3f5e7a, #88c1ec, #372907, #a78d1c, drawn from a seed fixed by its hex. Open it in Recolor.

Using amber-300

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

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

Common questions

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

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

Is Tailwind amber-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-amber-300: oklch(87.9% 0.169 91.605); #ffd230 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources