RecolorOpen Recolor

A vivid light orange, black text passes AA

Tailwind orange-300

In Tailwind CSS 4.3.3, orange-300 is defined as oklch(83.7% 0.128 66.29); as the nearest sRGB hex that is #ffb86a, or rgb(255 184 106). Black text on it reaches 12.32:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#ffb86aorange-300
From the theme file of Tailwind CSS 4.3.3 (--color-orange-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(83.7% 0.128 66.29)
Hex#ffb86a, the nearest color in sRGB
RGBrgb(255 184 106)
HSLhsl(31 100% 71%)
OKLCH of the hexoklch(83.4% 0.126 67.2)
CSS variablevar(--color-orange-300)
Nearest CSS namesandybrown #f4a460, 0.052 away in OKLab
White text1.71:1: AA fails, AAA fails, large text fails
Black text12.32:1: AA passes, AAA passes, large text passes

About orange-300

In OKLCH, orange-300 has a lightness of 83.7%, a chroma of 0.128 and a hue of 66.3 degrees, which makes it a vivid light orange. The step up to orange-200 is 6.4 points of lightness, and the step down to orange-400 8.7 points.

HSL calls its lightness 71%, OKLCH 83.7%: 13 points between a formula and a measure of what the eye sees. Orange-300 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #ffb86a, gives up 0.002 of chroma and moves 0.3 points of lightness and 0.9 degrees of hue; a Display P3 screen shows the full value.

For text, orange-300 wants black: 12.32:1 clears even AAA's 7:1, and white at 1.71:1 fails AA. Black text passes on every orange shade from orange-50 to orange-600, 3 shades darker than orange-300.

The nearest CSS named color, sandybrown (#f4a460), is 0.052 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #fff4e7
  2. #ffe8d0
  3. #ffdcb8
  4. #ffd09f
  5. #ffc486
  6. #ffb86a
  7. #c89052
  8. #94693a
  9. #634524
  10. #362410
  11. #0f0702

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. #ffb86a
  2. #242834
  3. #00a4cd
  4. #fddbb5
  5. #6d5235

Locked as the first of five swatches, orange-300 gets #242834, #00a4cd, #fddbb5, #6d5235 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using orange-300

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

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

Common questions

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

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

Is Tailwind orange-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-300: oklch(83.7% 0.128 66.29); #ffb86a is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is sandybrown (#f4a460), 0.052 away in OKLab.

Sources