Convert HSL (hue, saturation, lightness) color values into hex and RGB format.
Google AdSense Banner
This area will contain advertisements after approval.
Google AdSense Banner
This area will contain advertisements after approval.
HSL represents color using Hue (0-360°, the color's position on the color wheel), Saturation (0-100%, how vivid or gray the color is), and Lightness (0-100%, how light or dark the color is), an intuitive alternative to hex or RGB for adjusting colors by feel.
HSL makes it easy to create color variations, keep the same hue and adjust lightness for a tints/shades palette, or adjust saturation to make a color more muted or vivid, without needing to recalculate hex or RGB values manually.
Converting hsl(217, 83%, 53%): the hue of 217° falls in the blue range of the color wheel, with high saturation (83%) making it vivid rather than gray, and mid-range lightness (53%) keeping it neither too dark nor too pale. Running this through the standard HSL-to-RGB conversion formula gives RGB values of approximately (36, 112, 235), which converts to the hex code #2470eb.
Entering saturation or lightness as a decimal fraction (like 0.83) instead of a percentage (83), this tool expects saturation and lightness as numbers from 0 to 100, not 0 to 1.
Expecting hue values above 360 or below 0 to be rejected, hue is circular, so 380° is equivalent to 20°, but entering an out-of-range value can be confusing if you're expecting an error instead.
Confusing lightness with brightness/value from the HSB/HSV model, at 100% lightness every hue becomes pure white regardless of saturation, which surprises people expecting a vivid, fully saturated color.
HSL and HSB (also called HSV) are similar but calculate lightness/brightness differently, they can produce slightly different results for the same hue and saturation values.
Yes, modern CSS supports HSL natively, for example hsl(217, 83%, 53%), as an alternative to hex or RGB notation.
Google AdSense Banner
This area will contain advertisements after approval.