A vivid light orange, black text passes AA
What color is orange?
The CSS named color orange is #ffa500, or rgb(255 165 0): a vivid light orange in plain words. Black text on it reaches 10.63:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | orange |
| Hex | #ffa500 |
| RGB | rgb(255 165 0) |
| HSL | hsl(39 100% 50%) |
| OKLCH | oklch(79.3% 0.171 70.7) |
| Nearest Tailwind color | amber-500 #fd9a00, 0.026 away in OKLab |
| White text | 1.97:1: AA fails, AAA fails, large text fails |
| Black text | 10.63:1: AA passes, AAA passes, large text passes |
About orange
In OKLCH terms orange has a lightness of 79.3%, a chroma of 0.171 and a hue of 70.7 degrees, a vivid light orange to the eye.
Its HSL lightness, 50%, says little about how light orange looks; OKLCH, made to match the eye, measures 79.3%, 29 points away. No CSS keyword matches it; sandybrown (#f4a460) is the nearest, 0.053 away in OKLab, a clear step off.
For text, orange wants black: 10.63:1 clears even AAA's 7:1, and white at 1.97:1 fails AA. Its neighbors in the hue-sorted list of names are burlywood and tan.
The closest Tailwind 4.3.3 color is amber-500, 0.026 away in OKLab, so bg-amber-500 comes near; bg-[#ffa500] gives the color itself.
Tints and shades
- #fff1e0
- #ffe2c0
- #ffd49f
- #ffc57b
- #ffb553
- #ffa500
- #c88100
- #945e00
- #633d00
- #361f00
- #0f0600
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
- #ffa500
- #231828
- #ae6c00
- #ffeec8
- #276962
Locked as the first of five swatches, orange gets #231828, #ae6c00, #ffeec8, #276962 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 orange
As a text color, orange on a black page gives the same 10.63:1.
.notice {
background-color: orange; /* #ffa500 */
color: black; /* 10.63:1 */
}Common questions
Does white text pass WCAG AA on orange?
No. White text measures 1.97:1 on orange, under AA's 4.5:1; black text measures 10.63:1 and passes.
Can orange be written in OKLCH?
Yes: oklch(79.3% 0.171 70.7), computed from #ffa500. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to orange?
No. The nearest, sandybrown (#f4a460), is 0.053 away in OKLab, a different color.