RecolorOpen Recolor

A pale orange, black text passes AA

Tailwind orange-200

Tailwind orange-200 is oklch(90.1% 0.076 70.697) in Tailwind CSS 4.3.3, which is #ffd6a7 as the nearest sRGB hex and rgb(255 214 167). Black text on it reaches 15.43:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ffd6a7orange-200
From the theme file of Tailwind CSS 4.3.3 (--color-orange-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(90.1% 0.076 70.697)
Hex#ffd6a7, the nearest color in sRGB
RGBrgb(255 214 167)
HSLhsl(32 100% 83%)
OKLCH of the hexoklch(90.0% 0.076 70.4)
CSS variablevar(--color-orange-200)
Nearest CSS namenavajowhite #ffdead, 0.019 away in OKLab
White text1.36:1: AA fails, AAA fails, large text fails
Black text15.43:1: AA passes, AAA passes, large text passes

About orange-200

Tailwind orange-200 is a pale orange: OKLCH lightness 90.1%, chroma 0.076, hue 70.7 degrees. On Tailwind's orange scale it sits between orange-100 at 95.4% and orange-300 at 83.7%.

Its lightness is 83% in HSL and 90.1% in OKLCH, 7 points apart; only the second tracks how light it looks. Its value lies outside sRGB, the colors a hex code can name: #ffd6a7 is what CSS Color 4's gamut mapping makes of it, chroma 0.076 instead of 0.076, moving 0.1 points of lightness and 0.3 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on orange-200 measures 15.43:1, past the 7:1 of WCAG AAA, while white text manages only 1.36:1. On the orange scale black text works down to orange-600, which leaves orange-200 4 shades of margin.

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

Tints and shades

  1. #fff8f1
  2. #fff2e2
  3. #ffebd4
  4. #ffe4c5
  5. #ffddb6
  6. #ffd6a7
  7. #c8a882
  8. #947b5f
  9. #63523e
  10. #362c20
  11. #0f0a06

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. #ffd6a7
  2. #5d472f
  3. #87d7ee
  4. #1f1910
  5. #5c9cad

Recolor's generator, with orange-200 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #5d472f, #87d7ee, #1f1910, #5c9cad. Open it in Recolor.

Using orange-200

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

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

Common questions

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

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

Is Tailwind orange-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-200: oklch(90.1% 0.076 70.697); #ffd6a7 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources