RGB to HSL Converter
HSL describes a colour the way a person thinks about it: hue is the colour itself as an angle on the colour wheel, saturation is how vivid it is, and lightness is how close to white or black. RGB describes how a screen produces it, which is far less intuitive to adjust.
Free, no signupRuns entirely in your browser
Input
Result
hsl(0°, 84%, 60%)
About
What the RGB to HSL Converter does
The practical benefit is enormous for design systems. To make a button 10% darker on hover in RGB you have to adjust three values and hope the hue holds. In HSL you drop the lightness by 10% and the hue is guaranteed unchanged. That property is why HSL underpins most modern colour palettes — including the one this site uses.
How it works
Using the RGB to HSL Converter
- 1Enter the red, green and blue values, each from 0 to 255.
- 2The channels are normalised to a 0-1 range.
- 3Lightness is derived from the midpoint of the highest and lowest channel.
- 4Saturation comes from the spread between them, adjusted for lightness.
- 5Hue is calculated from which channel is dominant, expressed in degrees.
Use cases
What people use it for
- Building a colour scale by varying lightness alone
- Creating a hover state that stays on-hue
- Finding complementary colours by rotating the hue
- Defining a themeable palette with CSS custom properties
FAQ
Frequently asked questions
6 related
All tools →