A vivid medium orange, black text passes AA
What color is chocolate?
chocolate is a vivid medium orange: #d2691e in hex, rgb(210 105 30). Black text on it reaches 5.78:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.
Last updated
| Format | Value |
|---|---|
| Keyword | chocolate |
| Hex | #d2691e |
| RGB | rgb(210 105 30) |
| HSL | hsl(25 75% 47%) |
| OKLCH | oklch(63.4% 0.155 50.3) |
| Nearest Tailwind color | amber-600 #e17100, 0.036 away in OKLab |
| White text | 3.63:1: AA fails, AAA fails, large text passes |
| Black text | 5.78:1: AA passes, AAA fails, large text passes |
About chocolate
Measured in OKLCH, chocolate comes out at lightness 63.4%, chroma 0.155 and hue 50.3 degrees: a vivid medium orange.
HSL puts its lightness at 47% and OKLCH at 63.4%, 16 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. The nearest CSS named color, peru (#cd853f), is 0.061 away in OKLab: related, but plainly a different color.
Black is the ink for chocolate: 5.78:1 passes AA for body text, where white stops at 3.63:1. In the hue-sorted table of named colors it sits between darkgoldenrod and sienna.
In Tailwind CSS 4.3.3 the nearest default color is amber-600 (#e17100), 0.036 away in OKLab; for the exact color, an arbitrary value such as bg-[#d2691e] works.
Tints and shades
- #fae6dc
- #f4ceb9
- #edb596
- #e59c73
- #dc834e
- #d2691e
- #a45115
- #793a0c
- #502405
- #2b1002
- #0a0200
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
- #d2691e
- #ffd9c2
- #704c3c
- #f4a278
- #271409
Around chocolate as swatch 1, Recolor's generator made a monochromatic palette, one hue in five lightnesses: #ffd9c2, #704c3c, #f4a278, #271409, drawn from a seed fixed by its hex. Open it in Recolor.
Using chocolate
As a text color, chocolate on a black page gives the same 5.78:1.
.notice {
background-color: chocolate; /* #d2691e */
color: black; /* 5.78:1 */
}Common questions
Does white text pass WCAG AA on chocolate?
No. White text measures 3.63:1 on chocolate, under AA's 4.5:1; black text measures 5.78:1 and passes.
Can chocolate be written in OKLCH?
Yes: oklch(63.4% 0.155 50.3), computed from #d2691e. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to chocolate?
No. The nearest, peru (#cd853f), is 0.061 away in OKLab, a different color.