Brown to HSL — Color Code

#a52a2a
Format Value
HEX #a52a2a
RGB rgb(165, 42, 42)
HSL hsl(0, 59.4%, 40.6%)
CMYK cmyk(0%, 74.5%, 74.5%, 35.3%)
HSV hsv(0, 74.5%, 64.7%)

brown color harmonies

Tints & shades of brown

Tints (lighter)

#ad3d3d #b55151 #be6464 #c67777 #ce8b8b #d69e9e #deb2b2 #e6c5c5 #efd8d8 #f7ecec

Shades (darker)

#962626 #872222 #781f1f #691b1b #5a1717 #4b1313 #3c0f0f #2d0b0b #1e0808 #0f0404

Contrast & accessibility

The quick brown fox

On white · 7.08:1 · AAA

The quick brown fox

On black · 2.96:1 · Fail

Recommended text color: #ffffff

Use brown in code

CSS color: #a52a2a;
SCSS $color: #a52a2a;
Tailwind bg-[#a52a2a]
Swift UIColor(red: 0.647, green: 0.165, blue: 0.165, alpha: 1)
Android Color.parseColor("#a52a2a")
Flutter Color(0xFFA52A2A)

Colors similar to brown

Browse all Red colors →

What is the HSL code for brown?

The CSS color brown in HSL format is hsl(0, 59.4%, 40.6%). Use this value directly in CSS, SVG, and most design tools.

How do I use brown in CSS?

To apply brown in CSS:

  • Text color: color: hsl(0, 59.4%, 40.6%);
  • Background: background-color: hsl(0, 59.4%, 40.6%);
  • Border: border-color: hsl(0, 59.4%, 40.6%);

What are all the color format values for brown?

FormatValue
HEX#a52a2a
RGBrgb(165, 42, 42)
HSLhsl(0, 59.4%, 40.6%)
CMYKcmyk(0%, 74.5%, 74.5%, 35.3%)

How do I convert brown to HSL?

Select brown from the color name list in our color converter. The HSL value — hsl(0, 59.4%, 40.6%) — appears instantly alongside HEX, RGB, HSL and CMYK.

What color family does brown belong to?

brown belongs to the red color family. It is a medium, moderately saturated color with HSL values: hue 0°, saturation 59.4%, lightness 40.6%.

How do I create lighter and darker shades of brown?

Lighter variant (lightness 55.6%): #d14b4b. Darker variant (lightness 25.6%): #681b1b. These values are computed by adjusting HSL lightness ±15% while keeping the same hue and saturation.

What is HSL used for?

HSL describes colors by hue (0–360°), saturation (0–100%) and lightness (0–100%). It is more intuitive for designers — easy to create lighter, darker or less saturated variants of any color.