devkult_
tools24converters26
home/convert/rgb-to-hsl

Convert RGB to HSL

HSL is far more intuitive than RGB for adjusting colors, because it separates the pure hue from how vivid and how light a color is. This converter translates rgb() values into their HSL equivalent.

Example · RGBHSL
RGB input
rgb(192, 57, 43)
rgb(29, 209, 161)
rgb(84, 160, 255)
HSL output
hsl(6, 63%, 46%)
hsl(164, 76%, 47%)
hsl(213, 100%, 66%)

Try it with your own data

RGBrgb(192, 57, 43)
Hex#C0392B
5.44: 1
PASSWCAG AA (4.5:1)
FAILWCAG AAA (7:1)

Frequently Asked Questions

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) define how to make web content more accessible to people with disabilities. Contrast ratios are a key part of these guidelines to ensure text is readable against its background.

What contrast ratio should I aim for?

Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires at least 7:1 for normal text and 4.5:1 for large text.

How to convert RGB to HSL

  1. Take your rgb() value and normalize each channel to 0–1.
  2. Find the min and max channels to derive lightness and saturation.
  3. Compute the hue angle to get hsl(6, 63%, 46%) from rgb(192, 57, 43).

Frequently asked questions

What range do HSL values use?

Hue is 0–360 degrees around the color wheel, while saturation and lightness are percentages from 0 to 100.

Why convert RGB to HSL?

HSL lets you tweak one perceptual property at a time — shift the hue, mute the saturation, or lighten — which is awkward to do directly in RGB.

Related converters