Coffee to HSL — Color Code

#a6814c
Format Value
HEX #a6814c
RGB rgb(166, 129, 76)
HSL hsl(35.3, 37.2%, 47.5%)
CMYK cmyk(0%, 22.3%, 54.2%, 34.9%)
HSV hsv(35.3, 54.2%, 65.1%)

coffee color harmonies

Tints & shades of coffee

Tints (lighter)

#ae8c5c #b6986d #bea37d #c6af8d #ceba9d #d7c6ae #dfd1be #e7ddce #efe8de #f7f4ef

Shades (darker)

#977545 #886a3e #795e37 #6a5230 #5b4629 #4b3b23 #3c2f1c #2d2315 #1e170e #0f0c07

Contrast & accessibility

The quick brown fox

On white · 3.58:1 · AA Large

The quick brown fox

On black · 5.87:1 · AA

Recommended text color: #000000

Use coffee in code

CSS color: #a6814c;
SCSS $color: #a6814c;
Tailwind bg-[#a6814c]
Swift UIColor(red: 0.651, green: 0.506, blue: 0.298, alpha: 1)
Android Color.parseColor("#a6814c")
Flutter Color(0xFFA6814C)

Colors similar to coffee

Browse all Orange colors →

What is the HSL code for coffee?

The CSS color coffee in HSL format is hsl(35.3, 37.2%, 47.5%). Use this value directly in CSS, SVG, and most design tools.

How do I use coffee in CSS?

To apply coffee in CSS:

  • Text color: color: hsl(35.3, 37.2%, 47.5%);
  • Background: background-color: hsl(35.3, 37.2%, 47.5%);
  • Border: border-color: hsl(35.3, 37.2%, 47.5%);

What are all the color format values for coffee?

FormatValue
HEX#a6814c
RGBrgb(166, 129, 76)
HSLhsl(35.3, 37.2%, 47.5%)
CMYKcmyk(0%, 22.3%, 54.2%, 34.9%)

How do I convert coffee to HSL?

Select coffee from the color name list in our color converter. The HSL value — hsl(35.3, 37.2%, 47.5%) — appears instantly alongside HEX, RGB, HSL and CMYK.

What color family does coffee belong to?

coffee belongs to the orange color family. It is a medium, moderately saturated color with HSL values: hue 35.3°, saturation 37.2%, lightness 47.5%.

How do I create lighter and darker shades of coffee?

Lighter variant (lightness 62.5%): #c3a67c. Darker variant (lightness 32.5%): #725834. 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.