The HSL Converter
Iam me vides, iam non facis.
hex: three, four, six, or eight hexadecimal digits; “#” optional. ( #rgb, #rgba, #rrggbb, #rrggbbaa )
rgb: red, green, blue 0-255, alpha 0-1; separated by any non-digit delimiter(s); alpha optional. ( rgb(r g b / a), or just r g b a )
hsl: hue 0-359, saturation 0-100%, lightness 0-100%, alpha 0-1; separated by any non-digit delimiter(s); alpha optional. ( hsl(h s% l% / a), or just h s l a )
saturation, lightness, alpha decimal places: (+ 2 for alpha)
| hue: | |
| saturation: | |
| lightness: | |
| alpha: |
If you have ever worked with colors such as #80cc33 or rgb(128 204 51), you may have sometimes wished that you could make a hue lighter, or darker, or more or less saturated, without having to look it up in a color editor. Fortunately for you, CSS colors include the HSL (hue, saturation, lightness) color space, which is arguably the most intuitive to use. If you convert all your colors to HSL, it is a simple matter to tweak them by adjusting the parameters individually.
Enter a hexadecimal or RGB color into the form above and click “convert.” The formal syntax is optional as described beside the form. You may also convert from HSL to hex and RGB. Or select a named color. To find a color, hold the mouse down on either of the color palettes below the form, or move the sliders. An alpha (opacity) slider is provided as well.
Notes:
In the CSS color module level 4, the syntax for the rgb and hsl functions is rgb(r g b / a) and hsl(h s% l% / a), with alpha optional.
The legacy rgba() and hsla() functions are aliases for rgb() and hsl().
The functions also accept a legacy syntax in which all values are separated by commas.