Color family
Shades of brown
A dark, muted brown with warm undertones. The reference brown is #653700, as defined by the xkcd Color Survey.
| HEX | #653700 | |
|---|---|---|
| RGB | rgb(101, 55, 0) | |
| HSL | hsl(33, 100%, 20%) | |
| HSV | hsv(33, 100%, 40%) | |
| OKLCH | oklch(38.6% 0.089 61.8) | |
| CMYK* | 0, 46, 100, 60 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is brown?
Brown is a dark orange or dark yellow: it has no wavelength of its own and appears when an orange colour is seen darker than its surroundings. That is also why the CSS keyword brown, #A52A2A, looks reddish to most people. The brown most respondents chose in the xkcd survey is darker and more neutral, #653700, and is the one we show first.
Brown hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of brown in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Brown | #A52A2A | CSS named color | Noticeably different · 44% similar |
| Brown | #653700 | xkcd Color Survey | Reference shown on this page |
| Brown | #653700 | Color Names (meodai) | Same color |
Brown vs Tan
#653700
#D2B48C
Tan is a light, sandy brown; brown itself is much darker. In numbers: the two are 0% similar (OKLab distance 0.401). See Tan for its own codes.
Named shades of brown
80 names in the CSS keywords and the xkcd Color Survey belong to the brown family. They are sorted from light to dark; click a swatch to copy its code, or open the ones with their own page.
Light brown shades 2
Medium brown shades 52
Dark brown shades 26
Tints and shades of brown
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with brown
Classic color-wheel combinations built on #653700, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Brown with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a brown background, white text is the better choice.
Use brown in CSS
.brown {
color: #653700;
/* or */ color: rgb(101 55 0);
/* or */ color: hsl(33 100% 20%);
/* or */ color: oklch(38.6% 0.089 61.8);
}