HSL to RGB Color Converter
Please type in HSL input field and the RGB value will change on the other field instantly.
Hsl Value
RGB Value
Color Preview:
Welcome to our HSL to RGB color converter. Our HSL to RGB color converter, which will help you to convert colors from the HSL (Hue, Saturation, Lightness) to the RGB (Red, Green, Blue) color. Mostly these two colors are used in computer graphics, web design, and image processing to represent and manipulate colors.
| Preview | Color name | HSL Value | RGB Value |
| Mediumspringgreen | hsl(157, 100%, 49%) | rgb(0,250,154) | |
| Yellow | hsl(60, 100%, 50%) | rgb(255,255,0) | |
| Darkcyan | hsl(180, 100%, 27.3%) | rgb(0,139,139) | |
| Mediumaquamarine | hsl(160, 50.7%, 60.2%) | rgb(102,205,171) | |
| Indianred | hsl(0, 53.1%, 58.2%) | rgb(205,92,92) | |
| Lightseagreen | hsl(177, 69.5%, 41.2%) | rgb(32,178,171) | |
| Olive | hsl(60, 100%, 25.1%) | rgb(128,128,0) | |
| Darkslate gray | hsl(180, 25.4%, 24.7%) | rgb(47,79,79) | |
| Darkred | hsl(0, 100%, 27.3%) | rgb(139,0,0) | |
| Teal | hsl(180, 100%, 25.1%) | rgb(0,128,128) | |
| Aqua | hsl(180, 100%, 50%) | rgb(0,255,255) | |
| Mediumseagreen | hsl(147, 49.8%, 46.9%) | rgb(60,179,114) | |
| Gold | hsl(51, 100%, 50%) | rgb(255,217,0) | |
| Lime | hsl(120, 100%, 50%) | rgb(0,255,0) | |
| Darkturquoise | hsl(181, 100%, 41%) | rgb(0,206,209) | |
| Springgreen | hsl(150, 100%, 50%) | rgb(0,255,128) | |
| Mediumturquoise | hsl(178, 59.8%, 55.1%) | rgb(72,209,204) | |
| Chartreuse | hsl(90, 100%, 50%) | rgb(128,255,0) | |
| Steelblue | hsl(207, 44%, 49%) | rgb(70,130,180) | |
| Aquamarine | hsl(160, 100%, 74.9%) | rgb(127,255,212) | |
| Cadetblue | hsl(182, 25.5%, 50%) | rgb(95,158,160) | |
| Lightcyan | hsl(180, 100%, 93.9%) | rgb(224,255,255) | |
| Green | hsl(120, 100%, 25.1%) | rgb(0,128,0) | |
| Cornflowerblue | hsl(219, 79.2%, 66.1%) | rgb(100,148,237) | |
| Seagreen | hsl(146, 50.3%, 36.3%) | rgb(46,139,86) | |
| Deepskyblue | hsl(195, 100%, 50%) | rgb(0,191,255) | |
| Darkkhaki | hsl(56, 38.3%, 58%) | rgb(189,183,107) | |
| Lightblue | hsl(195, 53.3%, 79%) | rgb(173,216,230) | |
| Paleturquoise | hsl(180, 64.9%, 81%) | rgb(175,238,238) | |
| Skyblue | hsl(197, 71.4%, 72.5%) | rgb(135,207,235) | |
| Blueviolet | hsl(271, 75.9%, 52.7%) | rgb(137,43,226) | |
| Lightgreen | hsl(120, 73.4%, 74.9%) | rgb(144,238,144) | |
| Navy | hsl(240, 100%, 25.1%) | rgb(0,0,128) | |
| Darksalmon | hsl(15, 71.6%, 69.6%) | rgb(233,150,122) | |
| Turquoise | hsl(174, 72.1%, 56.5%) | rgb(64,224,208) | |
| Mediumblue | hsl(240, 100%, 40.2%) | rgb(0,0,205) | |
| Powderblue | hsl(187, 51.9%, 79.6%) | rgb(176,224,230) | |
| Mediumpurple | hsl(260, 59.8%, 64.9%) | rgb(148,112,219) | |
| Blue | hsl(240, 100%, 50%) | rgb(0,0,255) | |
| Firebrick | hsl(0, 67.9%, 41.6%) | rgb(178,34,34) | |
| Palegreen | hsl(120, 92.5%, 79%) | rgb(152,251,152) | |
| Dodgerblue | hsl(210, 100%, 55.9%) | rgb(30,143,255) | |
| Indigo | hsl(275, 100%, 25.5%) | rgb(76,0,130) | |
| Salmon | hsl(6, 93.2%, 71.4%) | rgb(250,128,114) | |
| Cyan | hsl(180, 100%, 50%) | rgb(0,255,255) | |
| Darkviolet | hsl(282, 100%, 41.4%) | rgb(148,0,211) | |
| Palevioletred | hsl(340, 59.8%, 64.9%) | rgb(219,112,148) | |
| Darkslateblue | hsl(248, 39%, 39.2%) | rgb(71,61,139) | |
| Limegreen | hsl(120, 60.8%, 50%) | rgb(50,205,50) | |
| Deeppink | hsl(328, 100%, 53.9%) | rgb(255,20,145) | |
| Darkseagreen | hsl(120, 25.1%, 64.9%) | rgb(143,188,143) | |
| Magenta / fuchsia | hsl(300, 100%, 50%) | rgb(255,0,255) | |
| Midnightblue | hsl(240, 63.5%, 26.9%) | rgb(25,25,112) | |
| Blanchedalmond | hsl(36, 100%, 90.2%) | rgb(255,235,205) | |
| Darkmagenta | hsl(300, 100%, 27.3%) | rgb(139,0,139) | |
| Lawngreen | hsl(90, 100%, 49.4%) | rgb(126,252,0) | |
| Darkorchid | hsl(280, 60.6%, 49.8%) | rgb(153,50,204) | |
| Darkblue | hsl(240, 100%, 27.3%) | rgb(0,0,139) | |
| Royalblue | hsl(225, 72.7%, 56.9%) | rgb(65,105,225) | |
| Mediumorchid | hsl(288, 58.9%, 58%) | rgb(186,85,211) | |
| Purple | hsl(300, 100%, 25.1%) | rgb(128,0,128) | |
| Lightsalmon | hsl(17, 100%, 73.9%) | rgb(255,160,122) | |
| Beige | hsl(60, 55.6%, 91.2%) | rgb(245,245,220) | |
| Violet | hsl(300, 76.1%, 72.2%) | rgb(238,130,238) | |
| Orchid | hsl(302, 58.9%, 64.7%) | rgb(218,112,214) | |
| Lightyellow | hsl(60, 100%, 93.9%) | rgb(255,255,224) | |
| Saddlebrown | hsl(25, 75.9%, 31%) | rgb(139,69,19) | |
| Rosybrown | hsl(0, 25.1%, 64.9%) | rgb(188,143,143) | |
| Peachpuff | hsl(28, 100%, 86.3%) | rgb(255,218,185) | |
| Hotpink | hsl(330, 100%, 70.6%) | rgb(255,105,180) | |
| Pink | hsl(350, 100%, 87.6%) | rgb(255,192,202) | |
| Antiquewhite | hsl(34, 77.8%, 91.2%) | rgb(250,235,215) | |
| Wheat | hsl(39, 76.7%, 83.1%) | rgb(245,222,179) | |
| Slateblue | hsl(248, 53.5%, 57.8%) | rgb(105,90,205) | |
| Forestgreen | hsl(120, 60.7%, 33.9%) | rgb(34,139,34) | |
| Lemonchiffon | hsl(54, 100%, 90.2%) | rgb(255,250,205) | |
| Lightpink | hsl(351, 100%, 85.7%) | rgb(255,182,193) | |
| Papayawhip | hsl(37, 100%, 91.8%) | rgb(255,239,213) | |
| Moccasin | hsl(38, 100%, 85.5%) | rgb(255,228,181) | |
| Chocolate | hsl(25, 75%, 47.1%) | rgb(210,105,30) | |
| Thistle | hsl(300, 24.3%, 79.8%) | rgb(216,191,216) | |
| Peru | hsl(30, 58.7%, 52.5%) | rgb(205,134,63) | |
| Sandybrown | hsl(28, 87.1%, 66.7%) | rgb(244,165,96) | |
| Cornsilk | hsl(48, 100%, 93.1%) | rgb(255,248,220) | |
| Mediumvioletred | hsl(322, 80.9%, 43.1%) | rgb(199,21,134) | |
| Bisque | hsl(33, 100%, 88.4%) | rgb(255,228,196) | |
| Tan | hsl(34, 43.7%, 68.6%) | rgb(210,180,140) | |
| Silver | hsl(0, 0%, 75.3%) | rgb(192,192,192) | |
| Lightskyblue | hsl(203, 92%, 75.5%) | rgb(135,206,250) | |
| Ivory | hsl(60, 100%, 97.1%) | rgb(255,255,240) | |
| Mediumslateblue | hsl(249, 79.8%, 67.1%) | rgb(124,104,238) | |
| Whitesmoke | hsl(0, 0%, 96.1%) | rgb(245,245,245) | |
| Lightgray / lightgrey | hsl(0, 0%, 82.7%) | rgb(211,211,211) | |
| Lavenderblush | hsl(340, 100%, 97.1%) | rgb(255,240,245) | |
| Linen | hsl(30, 66.7%, 94.1%) | rgb(250,240,230) | |
| Seashell | hsl(25, 100%, 96.7%) | rgb(255,245,238) | |
| Gainsboro | hsl(0, 0%, 86.3%) | rgb(220,220,220) | |
| Lightgoldenrodyellow | hsl(60, 80%, 90.2%) | rgb(250,250,210) | |
| Slategray | hsl(210, 12.6%, 50.2%) | rgb(112,128,144) | |
| Sienna | hsl(19, 56.1%, 40.2%) | rgb(160,81,45) | |
| Darkgray / darkgrey | hsl(0, 0%, 66.3%) | rgb(169,169,169) | |
| Burlywood | hsl(34, 56.9%, 70%) | rgb(222,184,135) | |
| Mistyrose | hsl(6, 100%, 94.1%) | rgb(255,228,225) | |
| Gray / grey | hsl(0, 0%, 50.2%) | rgb(128,128,128) | |
| Dimgray / dimgrey | hsl(0, 0%, 41.2%) | rgb(105,105,105) | |
| Palegoldenrod | hsl(55, 66.7%, 80%) | rgb(238,232,170) | |
| Aliceblue | hsl(208, 100%, 97.1%) | rgb(240,248,255) | |
| Navajowhite | hsl(36, 100%, 83.9%) | rgb(255,222,173) | |
| Coral | hsl(16, 100%, 65.7%) | rgb(255,127,80) | |
| Snow | hsl(0, 100%, 99%) | rgb(255,250,250) | |
| Mintcream | hsl(150, 100%, 98%) | rgb(245,255,250) | |
| Khaki | hsl(54, 76.9%, 74.5%) | rgb(240,230,140) | |
| Yellowgreen | hsl(80, 60.8%, 50%) | rgb(153,205,50) | |
| Oldlace | hsl(39, 85.2%, 94.7%) | rgb(253,245,230) | |
| Ghostwhite | hsl(240, 100%, 98.6%) | rgb(248,248,255) | |
| Floralwhite | hsl(40, 100%, 97.1%) | rgb(255,250,240) | |
| Lavender | hsl(240, 66.7%, 94.1%) | rgb(230,230,250) | |
| White | hsl(0, 0%, 100%) | rgb(255,255,255) | |
| Plum | hsl(300, 47.3%, 74.7%) | rgb(221,160,221) | |
| Orangered | hsl(16, 100%, 50%) | rgb(255,68,0) | |
| Lightslategray | hsl(210, 14.3%, 53.3%) | rgb(119,136,153) | |
| Maroon | hsl(0, 100%, 25.1%) | rgb(128,0,0) | |
| Brown | hsl(0, 59.4%, 40.6%) | rgb(165,42,42) | |
| Azure | hsl(180, 100%, 97.1%) | rgb(240,255,255) | |
| Red | hsl(0, 100%, 50%) | rgb(255,0,0) | |
| Honeydew | hsl(120, 100%, 97.1%) | rgb(240,255,240) | |
| Tomato | hsl(9, 100%, 63.9%) | rgb(255,99,71) | |
| Darkorange | hsl(33, 100%, 50%) | rgb(255,140,0) | |
| Darkgoldenrod | hsl(43, 88.7%, 38.2%) | rgb(184,135,11) | |
| Darkolivegreen | hsl(82, 39%, 30.2%) | rgb(85,107,47) | |
| Lightsteelblue | hsl(214, 41.1%, 78%) | rgb(176,196,222) | |
| Orange | hsl(39, 100%, 50%) | rgb(255,166,0) | |
| Black | hsl(0, 0%, 0%) | rgb(0,0,0) | |
| Greenyellow | hsl(84, 100%, 59.2%) | rgb(172,255,47) | |
| Darkgreen | hsl(120, 100%, 19.6%) | rgb(0,100,0) | |
| Goldenrod | hsl(43, 74.4%, 49%) | rgb(218,165,32) | |
| Crimson | hsl(348, 83.3%, 47.1%) | rgb(220,20,60) | |
| Lightcoral | hsl(0, 78.9%, 72.2%) | rgb(240,128,128) | |
| Olivedrab | hsl(80, 60.5%, 34.7%) | rgb(106,142,35) |
HSL (Hue, Saturation, Lightness):
Hue (H): presents the type of color, often described as the dominant wavelength of light. It limits from 0 to 360 degrees, with red at 0, green at 120, and blue at 240.
Saturation (S): Represents the intensity or purity of the color. It limits from 0 (gray) to 100% (fully saturated).
Lightness (L): presents the brightness of the color. It limits from 0(black) to 100%(white).
RGB(Red, Green, Blue):
Red(R): Fixed the quantity of red in the color, generally ranging from 0 to 255.
Green(G): Fixed the amount of green in the color, also ranging from 0 to 255.
Blue(B): Fixed the quantity of blue in the color, again ranging from 0 to 255.
Also you can use some mathematical formulas to convert HSL values to RGB values, that map the HSL values to RGB values. These formulas entangle trigonometric functions and are used to calculate the corresponding RGB values based on the given HSL values.
First, convert the hue to the RGB color space. The formula for this is:
C = (1 - |2L - 1|) * S
X = C * (1 - |(H/60°) mod 2 - 1|)
m = L - C/2
Where:
H is the hue value (in degrees, ranging from 0 to 360°).
S is the saturation value (ranging from 0 to 1).
L is the lightness value (ranging from 0 to 1).
C is the chroma.
X is a temporary value.
m is a temporary value.
Next, convert the hue value to the appropriate RGB components based on the hue segment:
If 0° <= H < 60°: RGB = (C, X, 0)
If 60° <= H < 120°: RGB = (X, C, 0)
If 120° <= H < 180°: RGB = (0, C, X)
If 180° <= H < 240°: RGB = (0, X, C)
If 240° <= H < 300°: RGB = (X, 0, C)
If 300° <= H < 360°: RGB = (C, 0, X)
Finally, add the lightness adjustment (m) to each of the R, G, and B components to get the final RGB values:
R = (R + m)
G = (G + m)
B = (B + m)