Building a colour scale
Convert your base colour to HSL, then step the lightness up and down to generate consistent tints and shades.
RGB to HSL
Convert an RGB colour to HSL in your browser, the model that makes colours easy to adjust.
Maintained by Roshan.
Use RGB to HSL
Converts rgb colour to hsl in this tab, with nothing sent anywhere.
Runs entirely on your deviceThe conversion happens in this browser tab. Nothing you type is uploaded, logged or stored, which is worth knowing for anything you would not paste into a search box.
Explore general converters
Find related browser-local tools for nearby tasks without starting another search.
Browse all general convertersAbout RGB to HSL
RGB describes a colour as amounts of red, green and blue light, which is how a screen builds it but not how a person thinks about it. HSL rewrites the same colour as a hue, a saturation and a lightness - three numbers that map onto the questions you actually ask when adjusting a colour. Which colour is it? How vivid? How light? Converting from RGB to HSL is what lets you take a value that came out of code or a graphics library and make it tweakable: a slightly lighter shade, a more muted version, the colour opposite it on the wheel are each a single number changing in HSL where they would be an awkward three-way adjustment in RGB. This does the conversion with the standard formula and rounds to whole degrees and percentages, the form CSS accepts directly.
Using RGB to HSL
- The three RGB channels are read from whatever notation they arrive in - rgb() parentheses, bare numbers, any spacing.
- Each channel is normalised and run through the standard RGB-to-HSL formula.
- Hue comes out in degrees from 0 to 360, its position on the colour wheel.
- Saturation and lightness are expressed as percentages, which is what CSS and design tools expect.
- The result is written as hsl(h, s%, l%), ready to paste.
Where rgb to hsl helps
Muting a colour
Lower the saturation in the HSL value to get a softer version of the same hue, which is one number rather than three.
Before you use the result
- Values are rounded to whole numbers, so a round trip back to RGB may shift a channel by one - imperceptible but real.
- It converts opaque colours; an alpha channel is not handled here.
- A grey, where the channels are equal, has no meaningful hue and reports zero by convention.
- It works in sRGB, the web default, not wider colour spaces.
- The colour is unchanged; only its description changes.
Questions about RGB to HSL
Why convert to HSL?
Because lighter, more muted, or opposite are each a single number changing in HSL, versus a three-channel adjustment in RGB.
What are the units?
Hue in degrees (0–360), saturation and lightness as percentages - exactly what CSS accepts.
Does the colour change?
No. HSL and RGB are two descriptions of the same colour.
Why is my grey's hue 0?
A grey has no hue, so zero is used by convention, with saturation at zero marking it as grey.
Related tools
HSL to RGB
Convert an HSL colour to RGB in your browser.
Hex to HSL
Convert a hex colour to HSL in your browser, the model that makes colours easy to adjust.
RGB to CMYK
Convert an RGB colour to CMYK in your browser, the model print uses.