Convert

RGB to HSL converter

Move the red, green and blue sliders, and read hue, saturation and lightness instantly. HueKit also shows hex, HSV and CMYK so you have every format at once.

#12C2E9
HEX#12C2E9
RGBrgb(18, 194, 233)
HSLhsl(191, 86%, 49%)
HSVhsv(191, 92%, 91%)
CMYKcmyk(92%, 17%, 0%, 9%)
Shades and tints
04272f
074e5d
0b748c
0e9bba
12c2e9
41ceed
71daf2
a0e7f6
d0f3fb
Complementary
12c2e9
e93912
Analogous
12e9a5
12c2e9
1257e9
Triadic
12c2e9
e912c2
c2e912

How RGB becomes HSL

RGB gives three raw numbers, the amount of red, green and blue light in the color. HSL reorganizes that same information into three more human ideas: hue, saturation and lightness. To convert, HueKit looks at the largest and smallest of the three channels. The average of those two is the lightness, the gap between them drives the saturation, and the channel that leads sets the hue angle on the color wheel.

The result is the identical color described a different way. That is why you can convert RGB to HSL, tweak the lightness, and convert back without the color drifting away from where it started.

Why HSL is easier to edit

Raw RGB is precise but hard to reason about, because changing one channel shifts hue and brightness at the same time. HSL untangles those, so you can hold the hue and simply lower the lightness for a darker shade, or drop the saturation for a muted version of the same color. That is what makes HSL the model designers reach for when refining a palette.

  • Read hue as a compass bearing around the color wheel.
  • Watch saturation fall to grey as red, green and blue converge.
  • Use lightness to build a tint and shade scale from one hue.

For the reverse direction, use the HSL to RGB converter, and the full color converter covers every model.

Frequently asked questions

How do I convert RGB to HSL?

Find the largest and smallest of the three channels. Their midpoint gives lightness, their spread gives saturation, and which channel is largest sets the hue angle. HueKit does the arithmetic live as you move the sliders.

Is RGB to HSL reversible?

Yes. Both models describe the same color space, so converting to HSL and back to RGB returns the same color apart from whole number rounding. Nothing meaningful is lost.

When is HSL more useful than RGB?

Whenever you want to adjust a color rather than define it. HSL lets you brighten, mute or shift the hue with one number each, which is far more intuitive than editing three raw channels.

Related tools