HEX to HSL converter, hex code → hue, saturation, lightness.

Hexadecimal tells you what a color is made of but nothing about what it looks like. HSL rewrites the same color as hue — the angle on the color wheel from 0 to 360 — saturation, the percentage of chroma from gray to pure color, and lightness, the percentage from black to white. Once a color is in those terms you can answer the questions you actually have: is this the same hue as our brand blue but lighter, is this gray actually a blue-gray, how far do I need to move lightness before white text becomes readable.

That is why HSL dominates the parts of a codebase that generate color rather than name it. Button hovers, disabled states, chart palettes and dark-mode surfaces are almost always derived by nudging one component: reduce saturation for a pressed state, raise lightness by eight points for a hover, drop both for a shadow tint. Doing the same work in hex means guessing at three unrelated numbers, because hex channels do not map onto the way a color is perceived.

The conversion itself runs RGB through an intermediate step: find the maximum and minimum channel to get the value range, derive lightness from their average and saturation from the difference, then compute hue from which channel is largest. Swatchboard performs that pipeline locally, so pasting a color never sends it anywhere.

Paste any hex code — with or without the hash, or as rgb() or hsl() — and the output shows the rounded hsl() function with hue in degrees and saturation and lightness as percentages. The preview swatch updates live, and the copy button puts a complete declaration on the clipboard ready for a stylesheet or a CSS custom property.

HSL percentages make it easy to keep a set of colors consistent: two colors with the same saturation and lightness but different hues sit at the same visual weight, which is what makes a palette feel deliberate rather than accidental. When you are auditing an existing hex palette, converting the whole set to HSL and lining the numbers up usually reveals which value is the odd one out.

One caution for anyone writing CSS: HSL interpolates differently from Lab-based spaces, so a gradient between two HSL colors can pass through a muddy middle. Keep hue angles within a sensible distance of each other for smooth transitions, and check the midpoint against your text color with the contrast checker rather than trusting the endpoints alone.