#D2B48CTan is a moderately saturated, mid-toned warm orange (#D2B48C).
Tan is a mid-toned, moderately saturated take on orange. Colors in this range are commonly associated with enthusiasm, friendliness and affordability, which makes tan a natural fit for playful brands, food products and secondary calls to action.
Tan is bright enough that it pairs better with dark text than white: black type on tan hits 10.65:1 — comfortably past the WCAG AA threshold — while white manages only 1.97:1. It shines as a section background, card fill or subtle highlight where a full-strength accent would shout.
For pairings, the complement of tan sits at 214° — #8DABD3, close to lightsteelblue — and delivers the strongest possible hue contrast; use it sparingly, in roughly a 90/10 split, so the two don't fight. For calmer schemes, the analogous colors 30° to either side keep the same warm temperature, while the triadic pair gives you a balanced three-color palette. All of these are computed for tan in the palettes below, with copy-ready codes.
The standard CSS keyword tan resolves to #D2B48C, or rgb(210, 180, 140). CSS does not define a separate keyword called light tan. For a paler tan-like surface, compare wheat (#F5DEB3), bisque (#FFE4C4), or one of the computed tints below.
Black text on standard tan produces a strong 10.65:1 contrast ratio; white text produces only 1.97:1 and fails WCAG AA. Use tan as a warm surface, border, or secondary fill with dark text, then verify the exact pair in the WCAG contrast checker.
Every palette below is computed from tan's position on the color wheel (hue 34°). Hover any swatch to see its code; click to copy.
Tints mix tan toward white; shades mix it toward black. Use the scale for hover states, borders and depth without leaving the hue.
WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text. Here's how tan performs, plus how it appears under the three main types of dichromatic color blindness (simulated approximation).
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on Tan | 1.97:1 | Fail | Fail |
| Black text on Tan | 10.65:1 | AAA | AAA |
#C5C596#C7C998#D09D9FCopy-ready snippets. In CSS you can also use the keyword tan directly.
:root {
--tan: #D2B48C;
--tan-rgb: 210, 180, 140;
--tan-tint: #E6D6C0;
--tan-shade: #74634D;
}
.btn-tan {
background: var(--tan);
color: #000000;
}@import "tailwindcss";
@theme {
--color-tan: #D2B48C;
--color-tan-light: #E6D6C0;
--color-tan-dark: #74634D;
}Generate a complete ramp and semantic roles in the Tailwind color generator.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
tan: { DEFAULT: "#D2B48C", light: "#E6D6C0", dark: "#74634D" }
}
}
}
};The closest CSS named colors by perceptual (Lab) distance.