CSS Color: Tan
Named CSS color Tan — #D2B48C in HEX, rgb(210, 180, 140) in RGB, hsl(34, 44%, 69%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Tan | color: Tan; |
| HEX | #D2B48C | color: #D2B48C; |
| RGB | rgb(210, 180, 140) | color: rgb(210, 180, 140); |
| HSL | hsl(34, 44%, 69%) | color: hsl(34, 44%, 69%); |
About Tan
Tan is a warm, muted beige-brown that serves as a versatile neutral in design. At hex `#D2B48C`, it sits at 34 degrees with 44% saturation and 69% lightness. Its moderate values create a gentle, sandy tone that feels natural and unobtrusive.
In web design, Tan is an excellent warm neutral for backgrounds, card surfaces, and section dividers. It adds warmth to designs without the starkness of white or the heaviness of brown. It is popular in fashion, interior design, and organic brand websites.
For accessibility, Tan against white achieves approximately 1.9:1 contrast, making it unsuitable for text on light backgrounds. Use it as a background color with dark text, or on dark surfaces as a warm, readable alternative to white.
Tan sits between Khaki and Peru in the warmth spectrum. It pairs well with white, dark brown, forest green, navy, and burgundy. In Tailwind CSS, `amber-200` or `yellow-200` provide similar warm neutral tones.
FAQ
What is the hex code for Tan?
The CSS named color Tan has the hex code #D2B48C. You can use it in CSS as color: #D2B48C; or simply color: Tan;.
What is Tan in RGB?
In RGB notation, Tan is rgb(210, 180, 140). Use it in CSS as color: rgb(210, 180, 140);.
What is Tan in HSL?
In HSL notation, Tan is hsl(34, 44%, 69%). Use it in CSS as color: hsl(34, 44%, 69%);.
What color category is Tan?
Tan belongs to the Brown color family in the CSS named colors specification.
Can I use the name "Tan" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Tan; or background-color: Tan; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Tan to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →