FREE WEB TOOL

RGB to HSL converter

Convert RGB values (0–255) to HSL hue, saturation and lightness.

Use tool

🔒 Inputs are processed locally in your browser.

How to use it

Convert red, green and blue channel values (0–255) into HSL hue, saturation and lightness. This is useful when you have an RGB color but want to tune it in a more human-readable color model.

  1. Enter R, G and B from 0 to 255.
  2. Select Convert.
  3. Read H as degrees and S/L as percentages, then copy the values into CSS or your design workflow.
Input
R / G / B: 0–255
Output
H in degrees, S / L in %
Example
49, 118, 236
Processing
In browser

Why HSL can be easier to edit

RGB 49 / 118 / 236 is a blue color. In HSL, the same color is separated into “which hue”, “how saturated” and “how light”, so you can change lightness without first guessing new RGB channel values.

RGB is convenient for device-oriented color values; HSL is often easier when a person wants to reason about a color adjustment.

Hue is an angle around the color wheel

Red sits near 0°, then the angle moves through yellow, green, cyan, blue and purple before wrapping around. If you want a related color with a different hue, H is the value to change first.

Saturation describes color intensity

Values near 0% approach gray, while higher values become more vivid. It is not an independent “strength” knob, though: the final appearance also depends heavily on lightness.

Lightness runs from black to white

0% is black and 100% is white, with the most recognizable color usually around the middle. For a pale background in the same hue family, keeping H stable and increasing L is a simple starting point.

Round-trips can differ by a small amount

RGB uses integer channels while HSL calculations may contain decimals. Converting to HSL and back can therefore move an RGB channel by about one step after rounding, so verify the final RGB/HEX value when exact matching matters.