StringMash.com

HSL to RGB converter

hsl() to rgb(), with the working.

Conversion
18 characters
Updates as you type
Hex#3366CC
RGBrgb(51, 102, 204)
HSLhsl(220, 60%, 50%)
HSV (HSB)hsv(220, 75%, 80%)
CMYKcmyk(75%, 50%, 0%, 20%)
Nearest CSS nameroyalblue
Contrast with white5.37:1 (AA)
Contrast with black3.91:1 (AA large text only)
The swatch and working are below

Show the steps
Aa blackAa white
  1. Write saturation and lightness as fractions: S = 0.6, L = 0.5. The hue is H = 220°.
  2. Chroma: C = (1 − |2L − 1|) × S = 1 × 0.6 = 0.6.
  3. X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0.6 × 0.333 = 0.2.
  4. m = L − C ÷ 2 = 0.5 − 0.3 = 0.2.
  5. H ÷ 60 = 3.667, which is from 3 to 4, so red, green and blue start as (0, X, C) = (0, 0.2, 0.6).
  6. Add m to each and multiply by 255: red 51, green 102, blue 204. Rounded, rgb(51, 102, 204).
  7. Contrast: 5.37:1 against white and 3.91:1 against black, so white text reads better on it.

Using the converter

Paste an hsl() value, comma or space separated, or type three numbers with the hue first. The rgb() value appears with the hex code and a swatch.

Hue is in degrees and wraps round, so 400 is the same as 40. Saturation and lightness are percentages from 0 to 100.

The HSL to RGB formula

Write S and L as fractions. Chroma is C = (1 − |2L − 1|) × S, which is largest at 50% lightness and shrinks to 0 at black and white. X = C × (1 − |(H ÷ 60) mod 2 − 1|), and m = L − C ÷ 2.

Pick the order of C, X and 0 from the hue's sector, add m to each, then multiply by 255 and round.

The six hue sectors

HueRed, green, blue before adding m
0° to 60°C, X, 0
60° to 120°X, C, 0
120° to 180°0, C, X
180° to 240°0, X, C
240° to 300°X, 0, C
300° to 360°C, 0, X

A worked example

Take hsl(32, 100%, 25%), a dark orange. C = (1 − |0.5 − 1|) × 1 = 0.5. H ÷ 60 = 0.533, so X = 0.5 × (1 − |0.533 − 1|) = 0.267. m = 0.25 − 0.25 = 0.

32° is in the red to yellow sector, (C, X, 0), so the channels are 0.5, 0.267 and 0. Times 255 and rounded that's rgb(128, 68, 0).

HSL values in RGB

HSLRGBHex
hsl(0, 0%, 100%)rgb(255, 255, 255)#FFFFFF
hsl(0, 0%, 50%)rgb(128, 128, 128)#808080
hsl(0, 100%, 50%)rgb(255, 0, 0)#FF0000
hsl(120, 100%, 25%)rgb(0, 128, 0)#008000
hsl(240, 100%, 50%)rgb(0, 0, 255)#0000FF
hsl(220, 60%, 50%)rgb(51, 102, 204)#3366CC
hsl(32, 100%, 50%)rgb(255, 136, 0)#FF8800
hsl(300, 50%, 75%)rgb(223, 159, 223)#DF9FDF
hsl(180, 25%, 90%)rgb(223, 236, 236)#DFECEC
hsl(45, 80%, 60%)rgb(235, 194, 71)#EBC247

HSL compared with HSV

Both models share the same hue. They differ in the other two numbers. In HSL, lightness 50% is the pure colour, 0% is black and 100% is white, so a colour can be lightened or darkened from the middle.

In HSV (also called HSB), the pure colour sits at 100% value and white is 0% saturation at 100% value. hsl(220, 60%, 50%) and hsv(220, 75%, 80%) are the same blue. CSS reads hsl() but not hsv(), and RGB to HSV has the other model.

Where HSL came from

George Joblove and Donald Greenberg described HSL in the August 1978 issue of Computer Graphics, the same issue in which Alvy Ray Smith described HSV.

CSS has accepted hsl() since CSS Color Level 3, and Level 4 added the space-separated form, hsl(220 60% 50%), with an optional alpha after a slash.

Questions

What does saturation 0% give?

C is 0, so all three channels equal L × 255 and the colour is a grey.

Can hsl() make every rgb() colour?

Yes. Both describe the same sRGB colours, so every rgb() value has an hsl() value, though rounding to whole numbers can shift a channel by one.

Sources

Written, edited and reviewed by .

Added and reviewed . What's new