RGB to HSL — Convert RGB Colors to HSL Values
Convert RGB color values to HSL. Live swatch and sliders, see hue, saturation, lightness — runs in your browser, no upload.
RGB to HSL
Convert RGB color values to HSL online. Enter RGB like 255,102,0 and get HSL. Works entirely in your browser.
HSL is the colour model that designers actually think in. RGB says “59 red, 130 green, 246 blue” and you picture nothing — the triplet is a machine instruction, not a colour description. HSL says “221 degrees hue (blue), 83% saturation (vivid), 48% lightness (balanced)” and you know immediately that the colour is a saturated medium blue. The conversion from RGB to HSL is not a mathematical curiosity — it is the translation from the screen’s native language to the designer’s native language, and the conversion makes colour reasoning possible in a way that RGB triplets do not.
The hue angle is the conversion’s most informative output. Once you know the hue of a colour — 221 degrees — you know which colours are analogous (221 ± 30 degrees), which are complementary (221 + 180 = 41 degrees), and which are triadic (221, 341, 101 degrees). A design system built on HSL can define a colour palette by keeping the saturation and lightness constant while rotating the hue, which produces a set of colours that are visually harmonious without manual tweaking. The converter gives you the hue as a starting point for that palette construction.
The saturation and lightness values are what make the conversion actionable in CSS. The CSS hsl() function is supported in every browser and every CSS preprocessor. A CSS custom property like --primary: hsl(221, 83%, 48%) is self-documenting in a way that --primary: #3B82F6 is not — you can read the hue and know it is blue, you can read the saturation and know how vivid it is, and you can read the lightness and know how bright it is. The converter produces the HSL values that make that self-documenting CSS possible.
How to use
Enter RGB values
Type red, green, and blue values (0-255) or paste an rgb(59, 130, 246) string. The HSL output updates in real time. A colour swatch and an HSL colour wheel show the hue, with saturation and lightness sliders for visual reference.
Read the HSL breakdown
The output shows hue (0-360 degrees), saturation (0-100%), and lightness (0-100%). Each component is displayed as a number and as a position on the colour wheel (hue) and the saturation/lightness gradient.
Copy the HSL value
Copy the value as a CSS-ready `hsl(221, 83%, 48%)` or `hsla(221, 83%, 48%, 1)` declaration. Paste it into a stylesheet, a CSS-in-JS template literal, or a design token definition.
Frequently asked
Why use HSL instead of RGB?
HSL maps to how humans think about colour: hue is the base colour (red, blue, green), saturation is the intensity (vivid vs muted), lightness is the brightness (light vs dark). RGB maps to how screens produce colour (red, green, and blue subpixels). Designers think in HSL; screens render in RGB. The conversion bridges the two mental models.
How is the hue calculated from RGB?
The hue is computed from the relative proportions of the RGB channels. The largest channel determines the base hue region (0-60 for red-dominant, 120-180 for green-dominant, 240-300 for blue-dominant), and the difference between the other two channels determines the offset within that region. The exact formula is the standard RGB-to-HSL transformation from computer graphics textbooks.
Does the tool show the colour on a colour wheel?
Yes — the HSL colour wheel panel marks the exact hue angle with a radial indicator. The saturation and lightness are shown as the distance from the centre and the brightness of the marker. This visual representation makes it easier to reason about colour relationships than the raw numbers alone.
What is the difference between HSL and HSV/HSB?
HSL (Hue, Saturation, Lightness) uses a double-cone model where pure white and pure black both have zero saturation. HSV (Hue, Saturation, Value, also called HSB) uses a single-cone model where white sits at the tip. HSL is the CSS standard; HSV is the standard in colour pickers like GIMP and Photoshop. The tool outputs HSL specifically.
Can I adjust the HSL values with sliders?
No — this tool converts from RGB to HSL in one direction. To explore colours by adjusting HSL values interactively, use the Color Converter tool which provides sliders for all colour models. The RGB-to-HSL tool is optimised for conversion speed, not colour exploration.
Limitations
- sRGB colour space onlyThe conversion assumes sRGB primaries. RGB values from Display P3, Adobe RGB, or other colour spaces produce HSL values that describe the colour as it would render in sRGB, which may not match the original colour space's intent.
- No perceptual uniformityHSL is not perceptually uniform — two colours with the same saturation and lightness but different hues may not appear equally saturated or bright to the human eye. For perceptually uniform colour manipulation, use a tool that supports CIELAB or CIELUV colour spaces.
- Hue is undefined for greysWhen R=G=B (a shade of grey), the hue is mathematically undefined. The tool reports the hue as 0 degrees for grey values. The saturation is 0%, which makes the hue value irrelevant in CSS usage.
Platform notes
- macOS
- Digital Color Meter shows RGB but not HSL. The browser tool bridges that gap when the design spec uses HSL for theming or colour scales.
- Web
- Runs entirely client-side. The colour wheel renders locally with no external assets.