Toolsloft

RGB to HSL Converter

Convert RGB color values to HSL (hue, saturation, lightness) for CSS. Free, instant, and private.

Independently verified for accuracy

Calculator by Toolsloft ↗
HSL
hsl(220, 60%, 50%)

Convert an RGB color to its HSL (hue, saturation, lightness) equivalent. HSL is easier to reason about when you want to lighten, darken, or shift the hue of a color in CSS. Enter three values from 0 to 255 and copy the hsl() result.

How this is calculated

Each channel is normalized to 0 to 1, then lightness is the midpoint of the largest and smallest channel, saturation comes from their spread, and hue is the angle of the dominant channel. This is the standard RGB to HSL formula used by CSS Color.

How to use

  1. Enter the red, green, and blue values, each from 0 to 255.
  2. The HSL value appears below as you type.
  3. Copy the hsl() result into your stylesheet.

Examples

  • 51, 102, 204: hsl(220, 60%, 50%)
  • 255, 0, 0: hsl(0, 100%, 50%)

FAQ

What is HSL good for?
HSL describes a color by hue, saturation, and lightness, which maps to how people think about color. Adjusting lightness or saturation is more intuitive in HSL than nudging three RGB channels at once.
Why is hue 0 for grays?
When red, green, and blue are equal the color has no saturation, so hue is undefined. By convention it is reported as 0 degrees.
Are the saturation and lightness percentages rounded?
Yes. Hue is rounded to the nearest degree and saturation and lightness to the nearest whole percent, which is the precision CSS uses in practice.

Embed this calculator

Add this free calculator to your own site. Copy the code and paste it where you want it to appear.

Related tools