CSS named color
Chocolate #D2691E
Chocolate (CSS keyword chocolate) has the hex code #D2691E and the RGB value rgb(210, 105, 30): a medium, vivid orange.
CSS chocolate (#d2691e) is a light, orangey brown, closer to milk chocolate or caramel than to dark chocolate. For a darker brown, saddlebrown is the usual pick.
Color codes for Chocolate
| CSS keyword | chocolate |
|---|---|
| HEX | #D2691E |
| RGB | rgb(210, 105, 30) |
| HSL | hsl(25, 75%, 47%) |
| HWB | hwb(25 12% 18%) |
| OKLCH | oklch(63.4% 0.155 50.3) |
| CMYK (naive, no ICC profile) | cmyk(0%, 50%, 86%, 18%) |
| Decimal | 13,789,470 |
| Hue family | Browns and tans |
Contrast and accessibility
On chocolate, black text has a contrast ratio of 5.77:1 and passes AA for normal text; white text reaches 3.63:1.
WCAG 2.2 contrast ratios (success criteria 1.4.3 and 1.4.6: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1). APCA Lc is the lightness contrast from the APCA-W3 0.0.98G model proposed for WCAG 3; a higher absolute value is more readable, and Lc 75 is its suggested minimum for body text.
| Pair | Ratio | AA | AA large | AAA | AAA large | APCA Lc |
|---|---|---|---|---|---|---|
| Black text on chocolate | 5.77:1 | Pass | Pass | Fail | Pass | 40.7 |
| White text on chocolate | 3.63:1 | Fail | Pass | Fail | Fail | −68.8 |
| Chocolate text on white | 3.63:1 | Fail | Pass | Fail | Fail | 63.3 |
| Chocolate text on black | 5.77:1 | Pass | Pass | Fail | Pass | −38.3 |
Tints and shades
Each step mixes chocolate with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, chocolate, white 25%) in CSS.
Tints (mixed with white)
- 5%
#d47129 - 15%
#d98040 - 25%
#dd8f56 - 35%
#e29e6d - 45%
#e6ad83 - 55%
#ebbc9a - 65%
#efcbb0 - 75%
#f4dac7 - 85%
#f8e9dd - 95%
#fdf8f4
Shades (mixed with black)
- 5%
#c8641d - 15%
#b3591a - 25%
#9e4f17 - 35%
#894414 - 45%
#743a11 - 55%
#5e2f0d - 65%
#4a250b - 75%
#351a08 - 85%
#201005 - 95%
#0b0502
Color harmonies
Rotating the hue in OKLCH while keeping lightness and chroma, chocolate's complementary color is #0099D3 (close to steelblue), its analogous colors are #D85D62 and #B97E00, and its triadic partners are #00A67D and #8B76E0. For text on top, black gives the higher contrast.
| Harmony | Rotation | Color |
|---|---|---|
| Complementary | +180° | #0099d3 |
| Analogous | −30°, +30° | #d85d62#b97e00 |
| Triadic | +120°, +240° | #00a67d#8b76e0 |
| Split-complementary | +150°, +210° | #00a0a9#5088e7 |
Computed in OKLCH: the hue is rotated by 180° (complementary), ±30° (analogous), ±120° (triadic) and 180° ±30° (split-complementary) while lightness and chroma stay fixed. Results that fall outside sRGB are brought back with the CSS Color 4 gamut mapping algorithm. Because this uses OKLCH, the values differ from tools that rotate hue in HSL, but every color keeps the same perceived lightness.
Warm or cool?
Chocolate is a warm color: its hue is 25° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.
Nearest named and Tailwind colors
Distance is ΔE OK, the Euclidean distance in OKLab multiplied by 100. Values under about 2 are hard to tell apart side by side.
Nearest CSS named colors
| Color | HEX | ΔE OK |
|---|---|---|
| peru | #cd853f | 6.1 |
| indianred | #cd5c5c | 7.6 |
| darkgoldenrod | #b8860b | 8.2 |
Nearest Tailwind v4 colors
| Color | HEX | ΔE OK |
|---|---|---|
| amber-600 | #e17100 | 4.6 |
| orange-600 | #f54900 | 7.4 |
| amber-700 | #bb4d00 | 8.0 |
Code snippets
.element {
color: chocolate;
background-color: #d2691e;
border-color: rgb(210 105 30);
outline-color: oklch(63.4% 0.155 50.3);
}<div class="bg-[#d2691e] text-black">...</div>
/* or register it once in your CSS (Tailwind v4) */
@theme {
--color-chocolate: #d2691e;
}
/* then use bg-chocolate, text-chocolate, border-chocolate */import SwiftUI
extension Color {
static let chocolate = Color(red: 0.824, green: 0.412, blue: 0.118)
}import androidx.compose.ui.graphics.Color
val Chocolate = Color(0xFFD2691E)import 'package:flutter/material.dart';
const chocolate = Color(0xFFD2691E);<!-- res/values/colors.xml -->
<color name="chocolate">#D2691E</color>Frequently asked questions
- What is the hex code for chocolate?
- The hex code for chocolate is #D2691E. The same color is rgb(210, 105, 30), hsl(25, 75%, 47%) and oklch(63.4% 0.155 50.3), and in CSS you can also write the keyword chocolate directly.
- Is chocolate a warm or cool color?
- Chocolate is a warm color: its hue is 25° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.
- What colors go with chocolate?
- Rotating the hue in OKLCH while keeping lightness and chroma, chocolate's complementary color is #0099D3 (close to steelblue), its analogous colors are #D85D62 and #B97E00, and its triadic partners are #00A67D and #8B76E0. For text on top, black gives the higher contrast.
- Can you use white text on chocolate?
- White text on chocolate has a contrast ratio of 3.63:1, which passes AA only for large text (24 px, or 18.66 px bold, and up) under WCAG 2.2. Black text reaches 5.77:1 and passes AA for normal text but not AAA. In APCA terms that is Lc −68.8 for white and Lc 40.7 for black.
- What is the RGB value of chocolate?
- Chocolate is rgb(210, 105, 30): red 210, green 105 and blue 30 on the 0 to 255 scale, or 82.4%, 41.2% and 11.8%. As a decimal integer it is 13789470.
Last reviewed by Arielton Oberek.