Essential cookies keep Huevex running. With your permission we also measure how the site is used. Nothing optional loads until you choose. Cookie Policy
Paste a hex code and see its hue, saturation and lightness - the form that makes a color easy to adjust.
Hex gives three amounts of light with no structure. HSL rearranges the same color into three values a person can reason about: hue on a 0-360 color wheel, saturation as a percentage from gray to vivid, and lightness from black through the color to white. #5B8DEF is hsl(220, 82%, 65%) - a blue, strongly saturated, about two thirds of the way to white.
That structure is what makes HSL useful. To make a hover state, keep the hue and drop the lightness by eight points. To make a tint for a background, keep the hue and push lightness to 95. To build a palette, hold saturation and lightness steady and rotate the hue. With hex, every one of those edits means picking three new numbers and hoping the result lands where you wanted.
Hue is the position on the wheel: 0 is red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta, and back to red at 360. Saturation at 0% is a pure gray at whatever lightness you chose; at 100% the color is as vivid as that hue can be at that lightness. Lightness at 50% is the most vivid version of a hue, while 0% is black and 100% is white regardless of hue - which surprises people the first time a saturated color disappears at either end.
Those endpoints are the practical trap. Two colors with the same lightness but different hues can look quite different in contrast terms, and a set built by holding lightness constant is not automatically balanced. That is why a palette checked only in HSL can still fail a contrast test, and why Huevex shows the ratios separately.
HSL is a convenient re-description of RGB, not a perceptual model. Equal steps in lightness do not look like equal steps to the eye, and moving ten degrees of hue has a very different effect near yellow than near blue. When you need perceptual accuracy - matching two colors, or building a ramp that looks evenly spaced - a model such as LAB or OKLCH is the right tool.
For everyday interface work, though, HSL is usually enough, and it is supported everywhere. Converting to HSL is the quickest way to find out whether a color that looks wrong is the wrong hue or simply the wrong weight of light.
Because the three values map to things you can name: hue, how gray it is, and how light it is. Editing lightness gives you a tint or shade of the same color, while editing hex changes three numbers at once.
No. HSL measures lightness from black to white; HSB (also called HSV) measures brightness with a separate measure of whiteness. Blue at 50% lightness in HSL is not blue at 50% brightness in HSB - the numbers are close but not interchangeable.
Contrast depends on perceived luminance, which varies by hue - yellow carries far more light than blue at the same HSL lightness. Check the ratio rather than the lightness value.
Yes, as hsla() with a fourth alpha value, or hsl() with a slash, for example hsl(219 82% 65% / 0.4). The hue, saturation and lightness stay the same.
Take these colors into the Color Engine and build a full palette, gradient set and interface system around them.
Open Color Engine