RGB to HSL converter
Convert RGB to hue, saturation and lightness.
Example: rgb(255, 107, 53)
HSL
Convert RGB to hue, saturation and lightness.
Example: rgb(255, 107, 53)
RGB says how much red, green and blue light a pixel gives off. HSL describes the same pixel as an angle on the color wheel plus two percentages, which is the quickest route from a color sampled in an image or screenshot to something you can nudge by eye.
About the formats. RGB gives the amount of red, green and blue light as three numbers from 0 to 255, as in rgb(255, 107, 53). Both the comma form and the space form rgb(255 107 53 / 50%) are read, and percentages work too. HSL describes a color as a hue angle on the color wheel (0 to 360 degrees, where 0 is red, 120 green and 240 blue), a saturation percentage and a lightness percentage. It is the same sRGB color as RGB, written in a way that is easier to adjust by eye.
How exact is it? RGB channels are read as they are and rounded to the nearest whole number when they carry decimals, so a normal rgb() value is never altered. The HSL values are shown to one decimal place, which is enough to give back exactly the same 8-bit color when you convert them again.
For example, rgb(244, 162, 97) in RGB is hsl(26.5, 87%, 66.9%) in HSL. The conversion is exact: HSL is only another way to write sRGB, so no colors are added or lost. The values are shown to one decimal, which is enough to get the identical 8-bit color back when you convert in the other direction.
Type or paste an RGB value such as rgb(244, 162, 97) and the HSL value, hsl(26.5, 87%, 66.9%), appears straight away. Use Copy to put it on your clipboard, or choose a color with the picker.
The first is the hue angle from 0° to 360° (0 is red, 120 green, 240 blue). The second is saturation, from grey at 0% to full color at 100%. The third is lightness, from black at 0% through the pure color at 50% to white at 100%.
Because the conversion is exact, and most colors do not land on a whole degree. You can round it to the nearest degree for CSS without a visible difference.
RGB channels are read as they are and rounded to the nearest whole number when they carry decimals, so a normal rgb() value is never altered. The HSL values are shown to one decimal place, which is enough to give back exactly the same 8-bit color when you convert them again.
Yes. Add transparency to the RGB value and it is carried over to the HSL result, which supports it too.
No. The conversion runs in your browser and nothing is uploaded.