Free tool · Color palettes · Runs in your browser
Color palette for chocolate brown
Short answer
Chocolate brown is #D2691E: the CSS color named chocolate, defined by the W3C, written rgb(210, 105, 30) or hsl(25, 75%, 47%). Its complement is #1E87D2; analogous colors are #D21E2D and #D2C31E; a triad adds #1ED269 and #691ED2.
#D2691E · rgb(210, 105, 30) · hsl(25, 75%, 47%) · contrast 3.63:1 on white, 5.78:1 on black
Complementary
Analogous
Triadic
Split complementary
Tetradic (rectangle)
Square
Tints (toward white)
Shades (toward black)
CSS variables for the analogous palette
:root {
--color-1: #d21e2d;
--color-2: #d2691e;
--color-3: #d2c31e;
}Nothing is uploaded. Click a color to copy its hex code.
Key takeaways
- Chocolate brown is #D2691E, rgb(210, 105, 30), hsl(25, 75%, 47%), CIELAB 56.0, 37.1, 56.7.
- Contrast: 3.6:1 on white and 5.8:1 on black. Black text on chocolate brown passes the WCAG AA minimum of 4.5:1.
- Its complement is #1E87D2; the analogous colors are #D21E2D and #D2C31E; the triad is #D2691E, #1ED269, #691ED2.
- 0 of the 9 tints and 8 of the 9 shades have at least 4.5:1 on a white background; the first shade that does is #A85418.
- Photographs rich in chocolate brown gave #895424, #AC732A, #643C1E, #986C42, #3A1F12, #B83723; the nearest of their colors to #D2691E was 15.1 CIEDE2000 units away.
- For people with deuteranopia the closest pair in the triad is 12.9 apart, against 55.3 for typical vision.
Measured: a palette for chocolate brown, from photographs
On white it has a contrast ratio of 3.6:1 (fails the WCAG AA minimum of 4.5:1 for normal text) and on black 5.8:1. A palette extracted from three photographs rich in chocolate brown (69%, 18% and 12% of their pixels near the hue) came out as #895424, #AC732A, #643C1E, #986C42, #3A1F12, #B83723.
We searched Wikimedia Commons for chocolate brown subjects and kept photographs under Creative Commons or public domain licenses. Of 12 candidates we kept the three with the largest share of pixels within 20 degrees of the hue of the color, with saturation of at least 30% and lightness between 10% and 50%. The tool's own palette code (k-means in CIELAB, no random numbers) found five colors in each photograph. The six colors in the table below come from only the pixels inside the color window, from the three photographs, so they are six shades and neighbors of chocolate brown rather than the whole picture.
| Color | Share | Nearest CSS name | Contrast on white | Contrast on black |
|---|---|---|---|---|
| #895424 | 27.4% | near saddlebrown | 6.26:1 | 3.36:1 |
| #AC732A | 23.7% | near peru | 4.01:1 | 5.24:1 |
| #643C1E | 18.7% | near saddlebrown | 9.52:1 | 2.21:1 |
| #986C42 | 16.3% | near sienna | 4.61:1 | 4.56:1 |
| #3A1F12 | 11.7% | near black | 15.17:1 | 1.38:1 |
| #B83723 | 2.3% | near firebrick | 5.82:1 | 3.61:1 |
Chocolate brown appears here as near saddlebrown, near peru, near saddlebrown, near sienna, near black, near firebrick. The photo palette is a starting point: colors from a photograph are rarely pure, and the table shows how each performs as text on white and black.
Measured: the photographs
| Photograph | Photographer, license | Pixels near the hue | Five colors |
|---|---|---|---|
| Six Tupla Chocolate Bars | Siknitrus, CC BY-SA 4.0 | 69% | #925E27 61%, #332014 14%, #C1A384 12%, #6E645A 8%, #C03D28 5% |
| Aseedtolife mint chocolate wiki | Aseedtolife, CC BY-SA 4.0 | 18% | #F4DA39 40%, #BA9C3E 19%, #59391C 16%, #988191 16%, #E0D3BC 10% |
| Green and Black's dark chocolate bar 1 | Mx. Granger, CC0 | 12% | #D3D5D5 45%, #45221F 22%, #5B484C 13%, #1D0E0E 11%, #9EA6AC 9% |
The photographs are credited with their Wikimedia Commons license. The extracted lists are the exact tool output.
Colors that go with chocolate brown
| Harmony | Colors | Closest pair, typical vision | Protanopia | Deuteranopia | Tritanopia |
|---|---|---|---|---|---|
| Complementary | #D2691E, #1E87D2 | 48.8 | 52.2 | 56.0 | 67.6 |
| Analogous | #D21E2D, #D2691E, #D2C31E | 21.4 | 17.1 | 9.1 | 10.6 |
| Triadic | #D2691E, #1ED269, #691ED2 | 55.3 | 22.7 | 12.9 | 40.0 |
| Split complementary | #D2691E, #1ED2C3, #1E2DD2 | 54.2 | 33.5 | 36.2 | 41.3 |
| Tetradic (rectangle) | #D2691E, #87D21E, #1E87D2, #691ED2 | 33.6 | 18.9 | 13.4 | 19.8 |
| Square | #D2691E, #2DD21E, #1E87D2, #C31ED2 | 40.9 | 13.3 | 0.6 | 15.5 |
The complement, #1E87D2, sits opposite #D2691E on the color wheel (hue + 180 degrees); Wikipedia's color scheme article describes analogous schemes as neighbors on the wheel and a triadic scheme as colors 120 and 240 degrees apart. Under protanopia, deuteranopia and tritanopia the colors are simulated with the Machado model at full severity; a closest pair below about 10 is hard to tell apart.
Chocolate brown in numbers
| Notation | Value |
|---|---|
| Hex | #D2691E |
| RGB | rgb(210, 105, 30) |
| HSL | hsl(25.0, 75.0%, 47.1%) |
| CMYK (simple conversion) | 0%, 50%, 86%, 18% |
| CIELAB (D65) | 56.0, 37.1, 56.7 |
| Nearest CSS color name | chocolate #D2691E (exact) |
| Contrast on white | 3.63:1 |
| Contrast on black | 5.78:1 |
Tints, shades and accessible text
| Step | Tint (toward white) | Contrast on white | Shade (toward black) | Contrast on white |
|---|---|---|---|---|
| 10% | #D77835 | 3.17:1 | #BD5F1B | 4.36:1 |
| 20% | #DB874B | 2.77:1 | #A85418 | 5.32:1 |
| 30% | #E09662 | 2.41:1 | #934A15 | 6.50:1 |
| 40% | #E4A578 | 2.11:1 | #7E3F12 | 8.06:1 |
| 50% | #E9B48F | 1.84:1 | #69350F | 9.92:1 |
| 60% | #EDC3A5 | 1.62:1 | #542A0C | 12.26:1 |
| 70% | #F2D2BC | 1.43:1 | #3F2009 | 14.77:1 |
| 80% | #F6E1D2 | 1.26:1 | #2A1506 | 17.38:1 |
| 90% | #FBF0E9 | 1.12:1 | #150B03 | 19.43:1 |
0 tints and 8 shades reach 4.5:1 against white. The WCAG success criterion 1.4.3 asks for at least 4.5:1 for normal text and 3:1 for large text; criterion 1.4.6 asks for 7:1 for the enhanced level.
Use it in CSS
:root { --chocolate-1: #895424; --chocolate-2: #ac732a; --chocolate-3: #643c1e; --chocolate-4: #986c42; --chocolate-5: #3a1f12; --chocolate-6: #b83723; }
The complement and analogous colors of #D2691E: #1E87D2, #D21E2D, #D2C31E.
Free tools:Color palette generatorPalette from an imageImage to textCompress an image
Check the contrast before you use it for text
- Chocolate brown #D2691E on white: 3.63:1; on black: 5.78:1.
- The darkest shade in the table, #150B03, reaches 19.43:1 on white.
- Large text (at least 18 point, or 14 point bold) needs 3:1; normal text needs 4.5:1; the enhanced level needs 7:1.
- Do not use color as the only way to tell things apart: about 1 in 12 men have a color vision deficiency.
How the numbers were made
The hex value of chocolate brown is the W3C CSS named color. Harmonies rotate the hue in HSL and keep saturation and lightness. Contrast follows the WCAG 2 definition with relative luminance. Color differences use CIEDE2000, which Wikipedia notes is designed so that a difference of 1.0 stands for a just noticeable difference. Color blindness is simulated with the matrices of Machado, Oliveira and Fernandes (2009) at severity 1.0. Palette extraction: pixels are grouped into 32 levels per channel and clustered with k-means in CIELAB; the same picture always gives the same palette. The accuracy test on pictures of known colors is on the palette generator page.
Questions people ask
What is the hex code for chocolate brown?
Chocolate brown is #D2691E (the W3C CSS named color), rgb(210, 105, 30).
What color goes with chocolate brown?
The complement of #D2691E is #1E87D2. Analogous colors are #D21E2D and #D2C31E; a triad is #D2691E, #1ED269, #691ED2.
Is #D2691E accessible for text?
On white it has 3.63:1 and on black 5.78:1. The WCAG AA minimum for normal text is 4.5:1, so black text on #D2691E passes.
Can people with color blindness tell the chocolate brown palette apart?
For the six colors of the photo palette, the closest pair is 7.5 apart for typical vision and 4.8 for deuteranopia (CIEDE2000; below about 10 is hard).
How was the palette made?
The tool found the dominant colors of the photographs with k-means clustering in CIELAB. It runs in your browser; you can do the same with your own picture on the palette from image page.
Can I use these colors commercially?
Colors themselves are not licensed. The photographs used to find them keep their Creative Commons licenses, shown in the table.
Can I get a palette from my own photo?
Yes. Use the palette from an image tool; nothing is uploaded.
How many colors should a palette have?
Many designs use five: one dominant, one or two supporting, one accent and a neutral. The tool lets you choose 3 to 10 when you extract from a picture.
What is the difference between tints and shades?
A tint mixes the color with white and a shade mixes it with black. The table shows nine of each in steps of 10%.
Related
Sources and how we checked
- W3C: CSS Color Module Level 4 (named colors) (read 2026-10-10)
- W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum) (read 2026-10-10)
- W3C: Understanding Success Criterion 1.4.6, Contrast (Enhanced) (read 2026-10-10)
- Wikipedia: Color scheme (read 2026-10-10)
- Wikipedia: Color difference (CIEDE2000) (read 2026-10-10)
- Machado, Oliveira and Fernandes: A physiologically-based model for simulation of color vision deficiency (2009) (read 2026-10-10)
- Wikimedia Commons (the photographs, under the licenses shown) (read 2026-10-10)
Reviewed October 10, 2026. The palettes were found with the tool's own code from Creative Commons photographs; contrast, harmonies and color differences are computed. The files and results are in data/seo/hub/evidence/2026-10-10/palette.