littlekit.
Free. No account.
Tool reference

HEX ↔ HSL: instructions, examples and limits

Converts between 8-bit sRGB and hue, saturation, lightness using channel extrema.

Open HEX ↔ HSL
Processing location: your browser

This tool is registered for local processing. Its tool input is handled in the current page; LittleKit’s product analytics do not include the input value.

What it does

Converts between 8-bit sRGB and hue, saturation, lightness using channel extrema.

Worked example

#ff0000 ↔ hsl(0, 100, 50).

The example demonstrates the operation. For file-based tools, results depend on the selected file and options.

How the result is produced

Converts between 8-bit sRGB and hue, saturation, lightness using channel extrema.

Important limits

HSL is not perceptually uniform. Hue in degrees, saturation/lightness in percent; no alpha.

Choosing the next step

Start with the representation your design system already uses. Use the contrast checker for a foreground/background pair, then test the actual font size and weight in context. A mathematically valid colour value can still be a poor interface choice.

Colour PickerThe native colour picker supplies an sRGB colour; the tool displays HEX, RGB and HSL equivalents.Contrast CheckerWCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B.HEX ↔ RGBHEX encodes three 8-bit sRGB channels in base 16; RGB shows them as decimal values.

See a mismatch between these instructions and the tool? Report a correction with a non-sensitive example.