Fawn to HSL — Color Code

#cfaf7b
Format Value
HEX #cfaf7b
RGB rgb(207, 175, 123)
HSL hsl(37.1, 46.7%, 64.7%)
CMYK cmyk(0%, 15.5%, 40.6%, 18.8%)
HSV hsv(37.1, 40.6%, 81.2%)

fawn color harmonies

Tints & shades of fawn

Tints (lighter)

#d3b687 #d8be93 #dcc59f #e0ccab #e5d3b7 #e9dbc3 #eee2cf #f2e9db #f6f0e7 #fbf8f3

Shades (darker)

#bc9f70 #a98f65 #977f59 #846f4e #715f43 #5e5038 #4b402d #383022 #262016 #13100b

Contrast & accessibility

The quick brown fox

On white · 2.09:1 · Fail

The quick brown fox

On black · 10.07:1 · AAA

Recommended text color: #000000

Use fawn in code

CSS color: #cfaf7b;
SCSS $color: #cfaf7b;
Tailwind bg-[#cfaf7b]
Swift UIColor(red: 0.812, green: 0.686, blue: 0.482, alpha: 1)
Android Color.parseColor("#cfaf7b")
Flutter Color(0xFFCFAF7B)

Colors similar to fawn

Browse all Orange colors →

What is the HSL code for fawn?

The CSS color fawn in HSL format is hsl(37.1, 46.7%, 64.7%). Use this value directly in CSS, SVG, and most design tools.

How do I use fawn in CSS?

To apply fawn in CSS:

  • Text color: color: hsl(37.1, 46.7%, 64.7%);
  • Background: background-color: hsl(37.1, 46.7%, 64.7%);
  • Border: border-color: hsl(37.1, 46.7%, 64.7%);

What are all the color format values for fawn?

FormatValue
HEX#cfaf7b
RGBrgb(207, 175, 123)
HSLhsl(37.1, 46.7%, 64.7%)
CMYKcmyk(0%, 15.5%, 40.6%, 18.8%)

How do I convert fawn to HSL?

Select fawn from the color name list in our color converter. The HSL value — hsl(37.1, 46.7%, 64.7%) — appears instantly alongside HEX, RGB, HSL and CMYK.

What color family does fawn belong to?

fawn belongs to the orange color family. It is a medium, moderately saturated color with HSL values: hue 37.1°, saturation 46.7%, lightness 64.7%.

How do I create lighter and darker shades of fawn?

Lighter variant (lightness 79.7%): #e3d1b3. Darker variant (lightness 49.7%): #ba8d44. 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.