littlekit.
Free. No account.
Tool reference

RGB ↔ HSL: instructions, examples and limits

HSL derives hue from the dominant RGB channel and lightness from the average channel extrema.

Open RGB ↔ 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

HSL derives hue from the dominant RGB channel and lightness from the average channel extrema.

Worked example

rgb(255,0,0) ↔ 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

HSL derives hue from the dominant RGB channel and lightness from the average channel extrema.

Important limits

Opaque sRGB colours; rounding can prevent exact round trips.

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.