Beige family
Tan color
A light, muted beige with warm undertones. The reference tan is #D2B48C, as defined by the CSS named color.
| HEX | #D2B48C | |
|---|---|---|
| RGB | rgb(210, 180, 140) | |
| HSL | hsl(34, 44%, 69%) | |
| HSV | hsv(34, 33%, 82%) | |
| OKLCH | oklch(78.6% 0.064 74.6) | |
| CMYK* | 0, 14, 33, 18 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is tan?
Tan is a pale brown. The name comes from tanbark, the oak bark once used to tan leather. The CSS keyword tan, #D2B48C, and the xkcd survey tan are close, the survey version being a little more yellow.
Tan hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of tan in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Tan | #D2B48C | CSS named color | Reference shown on this page |
| Tan | #D1B26F | xkcd Color Survey | Close · 86% similar |
| Tan | #D1B26F | Color Names (meodai) | Close · 86% similar |
Tan vs Beige
#D2B48C
#F5F5DC
Beige is paler and creamier; tan is darker and more clearly brown. In numbers: the two are 27% similar (OKLab distance 0.182). See Beige for its own codes.
Colors similar to tan
The closest named colors to #D2B48C across all three sources, with their similarity in OKLab.
Tints and shades of tan
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 tan
Classic color-wheel combinations built on #D2B48C, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Tan 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 tan background, black text is the better choice.
Use tan in CSS
.tan {
color: #D2B48C;
/* or */ color: rgb(210 180 140);
/* or */ color: hsl(34 44% 69%);
/* or */ color: oklch(78.6% 0.064 74.6);
/* CSS keyword */ color: tan;
}