HomeDevTan color codes
Color tools

Tan color codes

Tan color codes for #D2B48C — HEX, RGB, HSL, HSV, shades, named tans, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for tan, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named tan shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS tan#D2B48C = rgb(210, 180, 140) = hsl(34°, 44%, 69%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (slate blue)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base tan

CSS keyword

color: tan;
#D2B48C · rgb(210, 180, 140)
ϟ

Related shade

Family neighbor

wheat
#F5DEB3
ϟ

UI accent

Background use

background-color: #D2B48C;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward slate blue

Tan color family specification

Version 1.0.0

Definition
Tan in CSS centers on the keyword tan (#D2B48C / rgb(210, 180, 140) / hsl(34°, 44%, 69%)). Designers use tan families for neutral, sandy, and approachable on screens.
What it calculates
Tan family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Tan is a versatile neutral for cards and backgrounds in warm design systems.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --tan: #d2b48c;
  --tan-soft: #f5deb3;
  --tan-ink: #8b4513;
}

.banner {
  background-color: var(--tan);
  color: #ffffff;
}
Popular CSS tans
NameHEXRGBFeel
tan#D2B48C210, 180, 140Base keyword
wheat#F5DEB3245, 222, 179Named shade
burlywood#DEB887222, 184, 135Named shade
navajowhite#FFDEAD255, 222, 173Named shade
bisque#FFE4C4255, 228, 196Named shade
peru#CD853F205, 133, 63Named shade
beige#F5F5DC245, 245, 220Named shade
brown#A52A2A165, 42, 42Named shade
blanchedalmond#FFEBCD255, 235, 205Named shade
chocolate#D2691E210, 105, 30Named shade
cornsilk#FFF8DC255, 248, 220Named shade
darkgoldenrod#B8860B184, 134, 11Dark shade
i Related hues may appear in Named shades when useful for tan-adjacent palettes.
Assumptions
  • Base keyword tan = #D2B48C in sRGB.
  • Named list uses CSS Color Module keywords in/near the tan family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
tan → #D2B48C; complementary toward slate blue
Validation cases
  • tan → #D2B48C
  • wheat → #F5DEB3
  • shade of tan → same hue, lower lightness
  • tint of tan → same hue, higher lightness
Sources
  • CSS Color Module named colors (tan family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Beige color codes › ◉ Brown color codes › ◉ Ivory color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for tan?

The CSS named color tan is #D2B48C, equal to rgb(210, 180, 140) and hsl(34°, 44%, 69%).

What is the difference between tan and wheat?

Tan is a mid sandy brown. Wheat is lighter and yellower.

What colors go with tan?

White, olive, and navy sit well with tan. Terracotta accents add warmth. Always check text contrast.

Is tan good for body text?

Tan text on white usually fails AA—use dark brown/charcoal on tan backgrounds.

How do I use tan in CSS?

Use color: tan;, color: #D2B48C;, or color: rgb(210, 180, 140); on any property that accepts a <color> value, including background-color and border-color.