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