About Chocolate
Chocolate (chocolate) is a medium, vivid orange with the hex code #d2691e, or rgb(210, 105, 30). In HSL it sits at a hue of 25°, 75% saturation and 47% lightness. It is one of the 148 named colors every browser understands, so you can write color: chocolate; instead of the hex value.
Using Chocolate for text and backgrounds
| Pairing | Contrast ratio | WCAG |
|---|---|---|
| Chocolate text on white | 3.63 : 1 | AA large text only |
| Chocolate text on black | 5.78 : 1 | AA |
On a chocolate background, use black text (5.78 : 1). WCAG asks for at least 4.5 : 1 for body text and 3 : 1 for large text. Check other pairs with the Contrast Checker.
CSS
.element {
color: chocolate; /* or #d2691e */
background-color: #d2691e;
border: 1px solid rgb(210 105 30 / 50%);
}Similar named colors
Dark Goldenrod (#b8860b), Peru (#cd853f), Sienna (#a0522d), Goldenrod (#daa520), Tomato (#ff6347), Indian Red (#cd5c5c).
Color Name FinderPaste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
Open the tool Frequently asked questions
What is the hex code for chocolate?
#d2691e — that is rgb(210, 105, 30) and hsl(25, 75%, 47%). In CSS you can also just write chocolate.
Is chocolate text readable on white?
Its contrast ratio on white is 3.63 : 1, which passes only for large text (WCAG AA large).
What colors go well with chocolate?
Its complementary color is #1e87d2; analogous colors #d21e2d and #d2c31e sit next to it on the color wheel.