CSS Color: Chocolate
Named CSS color Chocolate — #D2691E in HEX, rgb(210, 105, 30) in RGB, hsl(25, 75%, 47%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Chocolate | color: Chocolate; |
| HEX | #D2691E | color: #D2691E; |
| RGB | rgb(210, 105, 30) | color: rgb(210, 105, 30); |
| HSL | hsl(25, 75%, 47%) | color: hsl(25, 75%, 47%); |
About Chocolate
Chocolate is a rich, warm brown with a strong orange component. At hex `#D2691E`, it sits at 25 degrees on the hue wheel with 75% saturation and 47% lightness. The high saturation gives it an energetic warmth that distinguishes it from muted earth tones.
In web design, Chocolate is popular for food and beverage brands, craft marketplaces, autumn-themed designs, and warm accent elements. It evokes comfort, warmth, and indulgence. Its rich orange character makes it more vibrant than typical browns.
For accessibility, Chocolate against white achieves approximately 4.0:1 contrast, passing WCAG AA for large text. For body text, darken it slightly or use it on light cream backgrounds where the contrast improves.
Chocolate pairs well with cream, ivory, dark green, navy, and warm gold. It bridges the gap between orange and brown, offering both warmth and earthiness. In Tailwind CSS, `orange-700` or `amber-700` provide close matches.
FAQ
What is the hex code for Chocolate?
The CSS named color Chocolate has the hex code #D2691E. You can use it in CSS as color: #D2691E; or simply color: Chocolate;.
What is Chocolate in RGB?
In RGB notation, Chocolate is rgb(210, 105, 30). Use it in CSS as color: rgb(210, 105, 30);.
What is Chocolate in HSL?
In HSL notation, Chocolate is hsl(25, 75%, 47%). Use it in CSS as color: hsl(25, 75%, 47%);.
What color category is Chocolate?
Chocolate belongs to the Brown color family in the CSS named colors specification.
Can I use the name "Chocolate" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Chocolate; or background-color: Chocolate; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Chocolate to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →