RecolorOpen Recolor

A vivid medium orange, white text passes AA

Tailwind yellow-700

In Tailwind CSS 4.3.3, yellow-700 is defined as oklch(55.4% 0.135 66.442); as the nearest sRGB hex that is #a65f00, or rgb(166 95 0). White text on it reaches 4.93:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#a65f00yellow-700
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(55.4% 0.135 66.442)
Hex#a65f00, the nearest color in sRGB
RGBrgb(166 95 0)
HSLhsl(34 100% 33%)
OKLCH of the hexoklch(55.5% 0.127 62.5)
CSS variablevar(--color-yellow-700)
Nearest CSS namesienna #a0522d, 0.049 away in OKLab
White text4.93:1: AA passes, AAA fails, large text passes
Black text4.26:1: AA fails, AAA fails, large text passes

About yellow-700

In OKLCH, yellow-700 has a lightness of 55.4%, a chroma of 0.135 and a hue of 66.4 degrees, which makes it a vivid medium orange. The step up to yellow-600 is 12.7 points of lightness, and the step down to yellow-800 7.8 points. Despite the name, yellow-700 reads as a vivid medium orange: its hue lies nearer orange than yellow.

HSL puts its lightness at 33% and OKLCH at 55.4%, 23 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Yellow-700 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #a65f00, gives up 0.008 of chroma and moves 0.1 points of lightness and 3.9 degrees of hue; a Display P3 screen shows the full value.

With white text, yellow-700 passes AA at 4.93:1. Black text, at 4.26:1, does not. It is the lightest yellow shade that carries white body text; yellow-600 falls short at 2.94:1.

Among the CSS keywords, sienna (#a0522d) comes closest at 0.049 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #f1e4d8
  2. #e3c9b3
  3. #d5ae8d
  4. #c69467
  5. #b67940
  6. #a65f00
  7. #814900
  8. #5e3400
  9. #3e2000
  10. #200e00
  11. #060200

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. #a65f00
  2. #241d2b
  3. #67dfcc
  4. #00665a
  5. #ffdcad

Locked as the first of five swatches, yellow-700 gets #241d2b, #67dfcc, #00665a, #ffdcad from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using yellow-700

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

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

Common questions

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

Yes. White text measures 4.93:1 on yellow-700, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind yellow-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-700: oklch(55.4% 0.135 66.442); #a65f00 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is sienna (#a0522d), 0.049 away in OKLab.

Sources