RecolorOpen Recolor

A pale orange, black text passes AA

Tailwind orange-100

The hex code of Tailwind orange-100 is #ffedd4 (rgb(255 237 212)), from its Tailwind CSS 4.3.3 value oklch(95.4% 0.038 75.164). Black text on it reaches 18.32:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ffedd4orange-100
From the theme file of Tailwind CSS 4.3.3 (--color-orange-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(95.4% 0.038 75.164)
Hex#ffedd4, the nearest color in sRGB
RGBrgb(255 237 212)
HSLhsl(35 100% 92%)
OKLCH of the hexoklch(95.4% 0.038 76.2)
CSS variablevar(--color-orange-100)
Nearest CSS namepapayawhip #ffefd5, 0.005 away in OKLab
White text1.15:1: AA fails, AAA fails, large text fails
Black text18.32:1: AA passes, AAA passes, large text passes

About orange-100

Read as numbers, orange-100 is lightness 95.4%, chroma 0.038 and hue 75.2 degrees; read by eye, it is a pale orange. Its neighbors on the orange scale are orange-50, 2.6 points lighter, and orange-200, 5.3 points darker.

HSL and OKLCH agree on how light it is, 92% and 95.4%. A hex code cannot hold orange-100 exactly: the value is outside sRGB, and #ffedd4 is the CSS Color 4 gamut mapping of it, chroma lowered by -0.000, 0.0 points of lightness and 1.0 degrees of hue away from the value.

Black on orange-100 reads at 18.32:1, enough for AAA body text; white reaches 1.15:1 and should stay off it. Black text passes on every orange shade from orange-50 to orange-600, 5 shades darker than orange-100.

Its nearest CSS named color, papayawhip (#ffefd5), is 0.005 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffcf8
  2. #fff9f1
  3. #fff6ea
  4. #fff3e2
  5. #fff0db
  6. #ffedd4
  7. #c8baa6
  8. #94897a
  9. #635c51
  10. #36322b
  11. #0f0d0a

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. #ffedd4
  2. #6d5042
  3. #aaaddb
  4. #171924
  5. #4f8e70

Around orange-100 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #6d5042, #aaaddb, #171924, #4f8e70, drawn from a seed fixed by its hex. Open it in Recolor.

Using orange-100

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

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

Common questions

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

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

Is Tailwind orange-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-100: oklch(95.4% 0.038 75.164); #ffedd4 is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: papayawhip (#ffefd5) is 0.005 away in OKLab, too close to tell apart by eye.

Sources