Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Tan color: hex code #D2B48C, RGB and palettes

Tan is #D2B48C (RGB 210, 180, 140), a CSS named color: a light, warm sandy brown. Dark text suits it; black reaches 10.64:1, while white text is only 1.97:1.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchTanlight, moderately saturated brown
HEX
#D2B48C
RGB
rgb(210, 180, 140)
HSL
hsl(34, 44%, 69%)

Best text on it: black at 10.64:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Tan

  • HEX#D2B48C
  • RGBrgb(210, 180, 140)
  • HSLhsl(34, 44%, 69%)
  • HSV34°, 33%, 82%
  • CMYK0%, 14%, 33%, 18%
  • Lablab(75.2% 6.9 24.7)
  • OKLCHoklch(78.6% 0.064 74.6)
  • Decimal13808780

Tints, shades and tones

From white to black in 10% steps, with Tan in the middle. Tap a code to copy it.

  1. 90%#FBF8F4
  2. 80%#F6F0E8
  3. 70%#F2E9DD
  4. 60%#EDE1D1
  5. 50%#E9DAC6
  6. 40%#E4D2BA
  7. 30%#E0CBAF
  8. 20%#DBC3A3
  9. 10%#D7BC98
  10. Base#D2B48C
  11. 10%#BDA27E
  12. 20%#A89070
  13. 30%#937E62
  14. 40%#7E6C54
  15. 50%#695A46
  16. 60%#544838
  17. 70%#3F362A
  18. 80%#2A241C
  19. 90%#15120E

Tones (mixed with gray)

  1. 10%#CAAF8B
  2. 20%#C2AA8A
  3. 30%#B9A488
  4. 40%#B19F87
  5. 50%#A99A86
  6. 60%#A19585
  7. 70%#999084
  8. 80%#908A82
  9. 90%#888581

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #8E6937
  • #BC9055
  • #D2B48C
  • #E8D8C3
  • #F9F5F0

Tan in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Tan with its complement, its triad and its tint and shade
  • Tan
  • Triad #8CD2B4
  • Triad #B48CD2
  • Complement
  • 50% tint
  • 50% shade

Tan in use

New collectionAutumn edit

Card body text stays dark for reading; tan carries the header and the button.

Shop nowTag

Headline in Tan

A paragraph with a link in dark text, because this color is too light for text on white; use it for fills instead.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#D2B48C
  • Protanopia (no red cones)#C0B489
  • Deuteranopia (no green cones)#C7BB8D
  • Tritanopia (no blue cones)#DEACA9

Contrast and readability

PairingRatioWCAG 2.2
as text on white1.97:1AA AA large AAA
as text on black10.64:1AA AA large AAA
white text on it1.97:1AA AA large AAA
black text on it10.64:1AA AA large AAA
on your background1.72:1AA AA large AAA

Export

:root {
  --tan: #d2b48c;
  --tan-rgb: 210 180 140;
  --tan-on: #000000;
}
On this page

Tan appears among the CSS keywords as #D2B48C. The name is linked to the color of tanned leather, and it is a soft, sandy light brown. It can look orange in some contexts, even though it is a muted brown.

What the codes mean

In RGB, tan is 210, 180, 140: red leads, green sits a little below it, and blue is lowest. In HSL that is hue 34°, 44% saturation and 69% lightness. The CMYK estimate is 0%, 14%, 33%, 18%. The moderate saturation is why tan feels neutral and easy to combine, since it never competes with a stronger accent.

The xkcd survey list has its own "tan": #D1B26F, which is yellower, about 3.4 away in OKLab distance. Both are called tan, so a design that mixes sources may drift. In the survey, "very light brown" (#D3B683) is only 1.4 from CSS tan, "fawn" (#CFAF7B) is 2.2 and "sandstone" (#C9AE74) is 3.4. Within CSS the nearest are burlywood (#DEB887), 2.3 away, and darkkhaki (#BDB76B), 5.6 away. For a gray-leaning cousin, look at khaki.

Using tan well

  • Text on it: black is 10.64:1. The 70% shade, #3F362A, reaches 6.00:1 and looks warmer. White text is 1.97:1 and fails.
  • As text: tan on white is the same 1.97:1, so use it for fills, not words.
  • Tints: the 80% tint, #F6F0E8, and 90% tint, #FBF8F4, are soft paper-like backgrounds.
  • Pairings: the complement is a dusty blue, #8CAAD2. Navy, olive, cream and deep green all pair with it; see the wood palettes.

Worked example

A woodworking shop wants a portfolio website with a leather-and-timber mood. Use tan as the header band and put the shop name over it in the dark brown #3F362A, which measures 6.00:1. For the page below, switch to the 90% tint, #FBF8F4, with text in near-black. Product captions can use the 40% shade, #7E6C54, for secondary labels; test it on the pale background in the contrast panel before you commit. Photos of finished pieces will stand out best on the pale tint, because tan photographs tend to blend with a tan frame.

Tan versus beige and khaki

All three are light neutrals. Tan is the deepest and warmest, beige is paler and more yellow, and khaki is grayer and greener. In practice the words are used loosely, so cite the hex code when it matters.

Sources

  1. W3C, CSS Color Module Level 4: named colors and color conversions (checked 2026-11-10) w3.org
  2. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org