Skip to content
QuicklyTools

RGB to HSL Converter

Convert RGB colors to HSL (hue, saturation, lightness) for easier palette creation in CSS.

Runs in your browser
Loading tool…

About the RGB to HSL Converter

HSL makes color adjustments intuitive: change lightness for hover states or rotate hue for a complementary color while keeping the same feel. Enter red, green and blue values (0–255) to get the CSS hsl() value and its components.

How to use it

  1. Enter red, green and blue values.
  2. Copy the HSL value.

Good to know

  • Values are rounded to one decimal place, which is more precise than CSS rendering needs.

Frequently asked questions

Why use HSL in CSS?

Creating lighter or darker variants is as simple as changing the lightness percentage.

What hue is pure red?

0° (and 360°).

Related tools

HEX to HSL ConverterColor ConverterHEX to RGB ConverterCSS Gradient Generator

More developer tools →