Tangerine to HSL — Color Code

#ff9408
Format Value
HEX #ff9408
RGB rgb(255, 148, 8)
HSL hsl(34, 100%, 51.6%)
CMYK cmyk(0%, 42%, 96.9%, 0%)
HSV hsv(34, 96.9%, 100%)

tangerine color harmonies

Tints & shades of tangerine

Tints (lighter)

#ff9e1e #ffa735 #ffb14b #ffbb62 #ffc578 #ffce8f #ffd8a5 #ffe2bc #ffecd2 #fff5e9

Shades (darker)

#e88707 #d17907 #b96c06 #a25e05 #8b5104 #744304 #5d3603 #462802 #2e1b01 #170d01

Contrast & accessibility

The quick brown fox

On white · 2.21:1 · Fail

The quick brown fox

On black · 9.49:1 · AAA

Recommended text color: #000000

Use tangerine in code

CSS color: #ff9408;
SCSS $color: #ff9408;
Tailwind bg-[#ff9408]
Swift UIColor(red: 1.000, green: 0.580, blue: 0.031, alpha: 1)
Android Color.parseColor("#ff9408")
Flutter Color(0xFFFF9408)

Colors similar to tangerine

Browse all Orange colors →

What is the HSL code for tangerine?

The CSS color tangerine in HSL format is hsl(34, 100%, 51.6%). Use this value directly in CSS, SVG, and most design tools.

How do I use tangerine in CSS?

To apply tangerine in CSS:

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

What are all the color format values for tangerine?

FormatValue
HEX#ff9408
RGBrgb(255, 148, 8)
HSLhsl(34, 100%, 51.6%)
CMYKcmyk(0%, 42%, 96.9%, 0%)

How do I convert tangerine to HSL?

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

What color family does tangerine belong to?

tangerine belongs to the orange color family. It is a medium, vivid color with HSL values: hue 34°, saturation 100%, lightness 51.6%.

How do I create lighter and darker shades of tangerine?

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