CSS Color: Sienna

Named CSS color Sienna #A0522D in HEX, rgb(160, 82, 45) in RGB, hsl(19, 56%, 40%) in HSL.

SiennaBrown

Color Values

FormatValueCSS Usage
NamedSiennacolor: Sienna;
HEX#A0522Dcolor: #A0522D;
RGBrgb(160, 82, 45)color: rgb(160, 82, 45);
HSLhsl(19, 56%, 40%)color: hsl(19, 56%, 40%);

About Sienna

Sienna is a warm, earthy orange-brown named after the Italian city of Siena, where this clay pigment was historically sourced. At hex `#A0522D`, it sits at 19 degrees on the hue wheel with 56% saturation and 40% lightness, giving it a distinctly warm, orange undertone.

In web design, Sienna is excellent for rustic, artisan, and heritage-themed designs. It works well for headings, accent elements, and earthy color palettes. Its warm orange cast differentiates it from cooler browns and gives designs a sun-baked, natural feel.

For accessibility, Sienna against white achieves approximately 5.1:1 contrast, passing WCAG AA for normal text and AAA for large text. This makes it a practical choice for colored text and headings on light backgrounds.

Sienna pairs well with cream, olive, forest green, navy, and warm gold. It creates beautiful autumn and earth-toned palettes. In Tailwind CSS, `orange-800` or `amber-800` are approximate matches.

FAQ

What is the hex code for Sienna?

The CSS named color Sienna has the hex code #A0522D. You can use it in CSS as color: #A0522D; or simply color: Sienna;.

What is Sienna in RGB?

In RGB notation, Sienna is rgb(160, 82, 45). Use it in CSS as color: rgb(160, 82, 45);.

What is Sienna in HSL?

In HSL notation, Sienna is hsl(19, 56%, 40%). Use it in CSS as color: hsl(19, 56%, 40%);.

What color category is Sienna?

Sienna belongs to the Brown color family in the CSS named colors specification.

Can I use the name "Sienna" directly in CSS?

Yes. All modern browsers support CSS named colors. You can write color: Sienna; or background-color: Sienna; directly in your stylesheet. Named colors are case-insensitive.

Try in Color Converter

Convert Sienna to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.

Open Color Converter →