1. Home
  2. Color converters
  3. HSL to RGB

HSL to RGB

This converter can convert HSL color to RGB color very quickly, HSL is alternative representation of the RGB color model, this standard includes almost all the colors that human vision can perceive. It is one of the most widely used color systems. Enter the values for colors of HSL, then click the Convert button you can get the RGB values and hex value. RGB to HSL

Type H(hue): °
Type S(saturation):%
Type L(lightness):%
 
Red color (R):
Green color (G):
Blue color (B):
RGB hex code (#):
Color preview:

Knowledge of converter

HSL (hue, saturation, lightness) and HSV (hue, saturation, value) are two alternative representations of the RGB color model, designed in the 1970s by computer graphics researchers to more closely align with the way human vision perceives color-making attributes. In these models, colors of each hue are arranged in a radial slice, around a central axis of neutral colors which ranges from black at the bottom to white at the top. The HSV representation models the way paints of different colors mix together, with the saturation dimension resembling various shades of brightly colored paint, and the value dimension resembling the mixture of those paints with varying amounts of black or white paint. The HSL model attempts to resemble more perceptual color models such as NCS or Munsell, placing fully saturated colors around a circle at a lightness value of ​1⁄2, where a lightness value of 0 or 1 is fully black or white, respectively.

How to convert HSL color to RGB color

To convert from HSL or HSV to RGB, we essentially invert the steps listed above (as before, R, G, B ∈ [0, 1]). First, we compute chroma, by multiplying saturation by the maximum chroma for a given lightness or value. Next, we find the point on one of the bottom three faces of the RGB cube which has the same hue and chroma as our color (and therefore projects onto the same point in the chromaticity plane). Finally, we add equal amounts of R, G, and B to reach the proper lightness or value.

Given a color with hue H∈ [0°, 360°], saturation S HSL ∈ [0, 1], and lightness L∈ [0, 1], we first find chroma:

hsl_to_rgb_1

Then we can find a point ( R1, G1, B1)along the bottom three faces of the RGB cube, with the same hue and chroma as our color (using the intermediate value Xfor the second largest component of this color):

hsl_to_rgb_2

hsl_to_rgb_3

Overlap (when H^ is an integer) occurs because two ways to calculate the value are equivalent: X=0 or X=C, as appropriate.

Finally, we can find R, G, and B by adding the same amount to each component, to match lightness:

hsl_to_rgb_4

HSL to RGB color table conversion table

ColorColor name(H,S,L)Hex(R,G,B)
 Black(0°,0%,0%)#000000(0,0,0)
 White(0°,0%,100%)#FFFFFF(255,255,255)
 Red(0°,100%,50%)#FF0000(255,0,0)
 Lime(120°,100%,50%)#00FF00(0,255,0)
 Blue(240°,100%,50%)#0000FF(0,0,255)
 Yellow(60°,100%,50%)#FFFF00(255,255,0)
 Olive(60°,100%,25%)#808000(128,128,0)
 Cyan(180°,100%,50%)#00FFFF(0,255,255)
 Magenta(300°,100%,50%)#FF00FF(255,0,255)
 Silver(0°,0%,75%)#C0C0C0(192,192,192)
 Navy(240°,100%,25%)#000080(0,0,128)
 Gray(0°,0%,50%)#808080(128,128,128)
 Maroon(0°,100%,25%)#800000(128,0,0)
 Purple(300°,100%,25%)#800080(128,0,128)
 Green(120°,100%,25%)#008000(0,128,0)
 Teal(180°,100%,25%)#008080(0,128,128)