RGB to HSL Converter
Convert RGB channels to hue, saturation and lightness.
Input
This tool runs entirely in your browser. The data you paste or load is never uploaded.
Result
Enter your input, then run the tool.
About this tool
Converts RGB to HSL, which is far easier to reason about when building a palette: shift the hue to change colour, adjust lightness for states. The output includes a CSS hsl() declaration and a preview swatch.
How to use it
- Enter the RGB values or pick a colour.
- Read the hue, saturation and lightness.
- Copy the hsl() value.
Frequently asked questions
Why is saturation sometimes 0%?
Greys have no hue information, so saturation is zero by definition.
Is HSL better than RGB?
For authoring variants of one colour, usually yes. For perceptual uniformity, neither is ideal; oklch is worth considering in modern CSS.
Keep going
Related tools
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL.
RGB to HEX Converter
Convert RGB channel values into a HEX code.
Color Palette Generator
Generate harmonious palettes from one base colour.
Color Contrast Checker
Test text and background colours against WCAG 2.2.
CSS Gradient Generator
Build linear and radial gradients with copy-ready CSS.
CSS Box Shadow Generator
Design layered shadows and copy the CSS.