Saffron to HSL — Color Code

#feb209
Format Value
HEX #feb209
RGB rgb(254, 178, 9)
HSL hsl(41.4, 99.2%, 51.6%)
CMYK cmyk(0%, 29.9%, 96.5%, 0.4%)
HSV hsv(41.4, 96.5%, 99.6%)

saffron color harmonies

Tints & shades of saffron

Tints (lighter)

#feb91f #fec036 #fec74c #fece62 #fed579 #ffdc8f #ffe3a6 #ffeabc #fff1d2 #fff8e9

Shades (darker)

#e7a208 #d09207 #b98107 #a27106 #8b6105 #735104 #5c4103 #453102 #2e2002 #171001

Contrast & accessibility

The quick brown fox

On white · 1.81:1 · Fail

The quick brown fox

On black · 11.59:1 · AAA

Recommended text color: #000000

Use saffron in code

CSS color: #feb209;
SCSS $color: #feb209;
Tailwind bg-[#feb209]
Swift UIColor(red: 0.996, green: 0.698, blue: 0.035, alpha: 1)
Android Color.parseColor("#feb209")
Flutter Color(0xFFFEB209)

Colors similar to saffron

Browse all Orange colors →

What is the HSL code for saffron?

The CSS color saffron in HSL format is hsl(41.4, 99.2%, 51.6%). Use this value directly in CSS, SVG, and most design tools.

How do I use saffron in CSS?

To apply saffron in CSS:

  • Text color: color: hsl(41.4, 99.2%, 51.6%);
  • Background: background-color: hsl(41.4, 99.2%, 51.6%);
  • Border: border-color: hsl(41.4, 99.2%, 51.6%);

What are all the color format values for saffron?

FormatValue
HEX#feb209
RGBrgb(254, 178, 9)
HSLhsl(41.4, 99.2%, 51.6%)
CMYKcmyk(0%, 29.9%, 96.5%, 0.4%)

How do I convert saffron to HSL?

Select saffron from the color name list in our color converter. The HSL value — hsl(41.4, 99.2%, 51.6%) — appears instantly alongside HEX, RGB, HSL and CMYK.

What color family does saffron belong to?

saffron belongs to the orange color family. It is a medium, vivid color with HSL values: hue 41.4°, saturation 99.2%, lightness 51.6%.

How do I create lighter and darker shades of saffron?

Lighter variant (lightness 66.6%): #feca55. Darker variant (lightness 36.6%): #ba8101. 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.