Contact

Tools  /  Colour  /  RGB → HSL

COLOUR

RGB → HSL

Convert RGB to HSL, with each channel on its own slider.

More Colour tools

Colour Converter HEX → RGB

What this tool does

Converts between RGB and HSL as a genuinely two-way tool — every R/G/B and H/S/L channel has its own slider and number field, and editing either side updates the other immediately, so it works equally well starting from an RGB value or from an intuitive hue/saturation/lightness adjustment.

Why editing HSL directly matters

HSL is often easier to reason about than RGB for adjusting a colour — "make it lighter" or "less saturated" maps directly onto the L and S sliders in a way it doesn't for R/G/B — so this tool keeps HSL just as editable as RGB rather than only computing it as a read-only output.

Hue wheel, eyedropper, and colour harmonies

Drag the interactive hue wheel to spin through hues at the current saturation and lightness, or use the browser's screen eyedropper to pick a colour directly. Four colour harmony types — complementary, analogous, triadic, and split-complementary — are generated from the current hue, each swatch clickable to jump straight to that colour.

Tint/shade scale and WCAG contrast

An 11-step lightness scale shows the current hue from near- black to near-white with the current lightness highlighted, and the contrast ratio against both black and white text is calculated and graded against real WCAG AA/AAA thresholds.

Getting it out

Copy the hex, rgb(), or hsl() form with one click.

Privacy

Everything runs locally in your browser -- nothing you pick or type is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?
No. Every conversion runs entirely in the browser -- nothing is sent to a server.
Can I edit the HSL values directly, or only RGB?
Both -- editing either the R/G/B sliders or the H/S/L sliders updates the other side immediately, so the tool works starting from whichever representation is more convenient.
Why would I want to adjust HSL instead of RGB?
HSL maps more directly onto how people describe colour changes -- "lighter," "more saturated," "a slightly different hue" -- each corresponding to one slider, where the same adjustment in RGB usually means changing all three channels together.
What are colour harmonies, and how are they generated?
Complementary (180° opposite), analogous (adjacent hues), triadic (evenly spaced three-way), and split-complementary are all computed from the current hue on the colour wheel -- standard colour theory relationships for building a coordinated palette.
Can I pick a colour from anywhere on my screen?
Yes, in browsers that support it -- the eyedropper button opens the browser's own screen colour picker.
Does it check contrast for accessibility?
Yes -- the contrast ratio against both black and white text is calculated and graded against the real WCAG AA/AAA thresholds.
Theme Accent