CSS Color: Brown
Named CSS color Brown — #A52A2A in HEX, rgb(165, 42, 42) in RGB, hsl(0, 59%, 41%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Brown | color: Brown; |
| HEX | #A52A2A | color: #A52A2A; |
| RGB | rgb(165, 42, 42) | color: rgb(165, 42, 42); |
| HSL | hsl(0, 59%, 41%) | color: hsl(0, 59%, 41%); |
About Brown
Brown in CSS is actually a dark, desaturated red rather than a true brown. At hex `#A52A2A`, it has 165 red with low equal green and blue (42 each). Sitting at 0 degrees hue (same as red) with 59% saturation and 41% lightness, it reads as a reddish-brown.
In web design, Brown adds warmth, earthiness, and a natural feel. It is popular in coffee brands, outdoor and adventure sites, artisan marketplaces, and rustic-themed designs. Brown conveys reliability, stability, and connection to nature.
For accessibility, Brown against white achieves approximately 6.3:1 contrast, passing WCAG AA and AAA for large text, and AA for normal text. This makes it a practical choice for colored text that needs good readability.
Brown pairs well with cream, tan, gold, forest green, and warm white. It creates rich, earthy palettes that feel grounded and trustworthy. In Tailwind CSS, `red-800` or `amber-900` provide approximate matches depending on how warm you want the brown.
FAQ
What is the hex code for Brown?
The CSS named color Brown has the hex code #A52A2A. You can use it in CSS as color: #A52A2A; or simply color: Brown;.
What is Brown in RGB?
In RGB notation, Brown is rgb(165, 42, 42). Use it in CSS as color: rgb(165, 42, 42);.
What is Brown in HSL?
In HSL notation, Brown is hsl(0, 59%, 41%). Use it in CSS as color: hsl(0, 59%, 41%);.
What color category is Brown?
Brown belongs to the Brown color family in the CSS named colors specification.
Can I use the name "Brown" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Brown; or background-color: Brown; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Brown to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →