RGB to HSL Converter
Runs in your browser — your data is never uploaded.
Convert an RGB colour to HSL — hue, saturation, lightness — and get the hex alongside it. HSL is far easier to edit by hand than RGB: to make a colour lighter you raise one number instead of guessing at three, and the hue stays exactly where it was. That is why design systems tend to define palettes in HSL and export hex.
How to use RGB to HSL
- 1
Enter the red, green and blue values, each 0–255.
- 2
Read the HSL values and the hex.
- 3
Adjust lightness in HSL to build tints and shades of the same hue.
Share
Embed this tool on your site
Paste this where you want the tool to appear. It runs entirely in your visitor's browser — no uploads, no account, no tracking.
Please keep the attribution line — it's what keeps these tools free.
Need a different size, a dark theme, or a different tool? Build an embed lets you preview it first.
Frequently asked questions
Why work in HSL rather than RGB?+
Because the numbers mean something you can reason about. A 10% lighter version of an RGB colour requires changing all three channels by different amounts; in HSL you raise lightness and everything else stays put.
What is the difference between HSL and HSB/HSV?+
They share a hue but differ in the third value. HSL’s 100% lightness is always white; HSB’s 100% brightness is the most vivid version of the hue. Design tools often show HSB, CSS uses HSL, and mixing them up gives washed-out results.
Can I use HSL directly in CSS?+
Yes — hsl(210, 50%, 40%) is valid everywhere, and it is more readable in a stylesheet than a hex code. Modern CSS also accepts hsl() with an alpha value.