Brown colors
27 brown colors, sorted light to dark. The lightest is Burlywood at 70 percent lightness, the darkest is Bistre at 18 percent. Each one has hex, HSL, OKLCH and the contrast it gives against white and ink black.
| Color | Hex | HSL | OKLCH | On white | On ink |
|---|---|---|---|---|---|
| Burlywood | #DEB887 | hsl(34, 57%, 70%) | oklch(80.45% 0.0779 73.42) | 1.86:1 | 10.31:1 |
| Tan | #D2B48C | hsl(34, 44%, 69%) | oklch(78.62% 0.0638 74.62) | 1.97:1 | 9.70:1 |
| Fawn | #E5AA70 | hsl(30, 69%, 67%) | oklch(78.08% 0.1019 64.91) | 2.04:1 | 9.40:1 |
| Khaki Brown | #C3B091 | hsl(37, 29%, 67%) | oklch(76.54% 0.0477 79.96) | 2.11:1 | 9.06:1 |
| Rosy Brown | #BC8F8F | hsl(0, 25%, 65%) | oklch(69.27% 0.0548 18.57) | 2.81:1 | 6.80:1 |
| Camel | #C19A6B | hsl(33, 41%, 59%) | oklch(71.13% 0.0782 71.24) | 2.59:1 | 7.38:1 |
| Peru | #CD853F | hsl(30, 59%, 53%) | oklch(67.82% 0.1227 62.18) | 2.99:1 | 6.40:1 |
| Bronze | #CD7F32 | hsl(30, 61%, 50%) | oklch(66.61% 0.1315 61.29) | 3.14:1 | 6.09:1 |
| Field Drab | #988558 | hsl(42, 27%, 47%) | oklch(62.31% 0.0661 87.56) | 3.60:1 | 5.31:1 |
| Ochre | #CC7722 | hsl(30, 71%, 47%) | oklch(64.96% 0.1404 59.61) | 3.37:1 | 5.68:1 |
| Copper | #B87333 | hsl(29, 57%, 46%) | oklch(61.80% 0.1171 60.40) | 3.79:1 | 5.05:1 |
| Light Brown | #B5651D | hsl(28, 72%, 41%) | oklch(58.72% 0.1303 56.77) | 4.34:1 | 4.41:1 |
| Brown | #A52A2A | hsl(0, 59%, 41%) | oklch(48.06% 0.1597 25.56) | 7.08:1 | 2.70:1 |
| Sienna | #A0522D | hsl(19, 56%, 40%) | oklch(52.65% 0.1151 44.60) | 5.62:1 | 3.41:1 |
| Raw Umber | #826644 | hsl(33, 31%, 39%) | oklch(52.98% 0.0606 71.33) | 5.34:1 | 3.58:1 |
| Mahogany | #C04000 | hsl(20, 100%, 38%) | oklch(54.85% 0.1739 39.51) | 5.28:1 | 3.62:1 |
| Golden Brown | #9C661F | hsl(34, 67%, 37%) | oklch(55.61% 0.1081 68.67) | 4.85:1 | 3.95:1 |
| Umber | #635147 | hsl(21, 16%, 33%) | oklch(45.02% 0.0289 50.70) | 7.50:1 | 2.55:1 |
| Coffee | #6F4E37 | hsl(25, 34%, 33%) | oklch(45.39% 0.0568 55.64) | 7.44:1 | 2.57:1 |
| Saddle Brown | #8B4513 | hsl(25, 76%, 31%) | oklch(47.08% 0.1121 50.85) | 7.10:1 | 2.70:1 |
| Russet | #80461B | hsl(26, 65%, 30%) | oklch(45.69% 0.0969 53.62) | 7.47:1 | 2.56:1 |
| Brown Web | #964B00 | hsl(30, 100%, 29%) | oklch(49.67% 0.1235 54.69) | 6.36:1 | 3.01:1 |
| Dark Brown | #654321 | hsl(30, 51%, 26%) | oklch(41.40% 0.0676 63.98) | 8.83:1 | 2.17:1 |
| Maroon | #800000 | hsl(0, 100%, 25%) | oklch(37.67% 0.1546 29.23) | 10.95:1 | 1.75:1 |
| Chocolate Traditional | #7B3F00 | hsl(31, 100%, 24%) | oklch(43.49% 0.1052 57.00) | 8.22:1 | 2.33:1 |
| Taupe | #483C32 | hsl(27, 18%, 24%) | oklch(36.57% 0.0237 61.78) | 10.67:1 | 1.79:1 |
| Bistre | #3D2B1F | hsl(24, 33%, 18%) | oklch(30.68% 0.0337 54.78) | 13.43:1 | 1.42:1 |
Where brown sits on the wheel
In HSL terms this family covers roughly 15 to 45 degrees at low lightness. Brown is not a hue. Every brown in this library is an orange or a red with the lightness or the saturation pulled down, which is why brown has no slice of the color wheel to itself.
Working with brown in an interface
Because browns are darkened warm colors, they pair naturally with the oranges and yellows they descend from, and they make good text and border colors on cream and off-white surfaces where pure black would be too hard.
In this set, 15 of 27 brown colors clear WCAG AA for normal text on a white background, and 11 of 27 clear it as text on ink black. The most saturated is Mahogany at an OKLCH chroma of 0.174, the most muted is Taupe at 0.024. If you are building a ramp, those two are the practical edges of what this family gives you.
The mistake to avoid
A brown built by desaturating an orange and a brown built by darkening it look different even at the same lightness. If a brown looks muddy, the fix is usually more saturation and less lightness, not the reverse.
Check any pair you are unsure about in the contrast checker, or open the contrast matrix to see which library colors pair safely with each other.
Other families
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.