Free Online HSL to RGB

HSL-to-RGB conversion turns hue, saturation and lightness into the red, green and blue channels expected by sRGB display pipelines and CSS rgb().

Your data is processed entirely in your browser and never sent to any server.

Instant results 100% private No signup needed
60
Red
131
Green
246
Blue
Hex#3C83F6
RGBrgb(60, 131, 246)
Formula

c = (1 - |2L - 1|) × S, x = c × (1 - |(H/60) mod 2 - 1|), m = L - c/2. Pick the RGB segment by hue sector, then offset every channel by m and scale to 0–255.

How to Use This Tool

  1. Drag the Hue slider to a position on the color wheel (0° red, 120° green, 240° blue).
  2. Drag Saturation — 0% gives gray, 100% gives the pure hue.
  3. Drag Lightness — 0% is black, 50% is the pure hue, 100% is white.
  4. Copy the resulting Hex or RGB string using the icons next to each value.

What Is a HSL to RGB?

HSL is a cylindrical reparametrisation of the RGB cube introduced by Joblove and Greenberg in 1978 and standardised in CSS Color Module Level 3. Hue (0–360°) walks around the wheel, saturation (0–100%) controls chroma, and lightness (0–100%) sets the position between black and white. This converter applies the W3C-spec algorithm: chroma = (1 − |2L − 1|) × S, hue is mapped into one of six sectors, then offset by m = L − c/2 to land each channel in the 0–255 range.

The HSL representation is friendlier for theme work — "give me the same hue, just darker" is one slider in HSL but three coupled changes in RGB. Once you've found the value you want, this tool converts to the rgb() and hex forms most CSS, JSON tokens and design APIs actually consume.

Nothing is sent over the network; sliders update locally as you move them.

Frequently Asked Questions

What is HSL?
Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). HSL describes color the way humans think about it — pick a hue, then dial it in.
When should I use HSL instead of RGB?
Whenever you need to tweak a color — desaturate it, lighten it, or shift its hue — HSL is much easier to reason about than RGB.
How is HSL converted to RGB?
The W3C algorithm computes chroma c = (1 - |2L - 1|) × S, then maps the hue to an RGB triplet and offsets by m = L - c/2. The result is three 0–255 channels.

Published by the WeGotEveryTool team. We build and test every tool in-house and update pages when the underlying spec, formula, or recommendation changes.

Reviewed: May 2026. Disclaimer: this tool is provided as-is for general informational use. For decisions with material consequences (medical, legal, financial, security) verify results against a qualified professional source.

Related Color & Design

Hex to RGB

Convert hex color codes to RGB values. Supports 3-, 6- and 8-digit hex (with alpha) for CSS and design workflows.

RGB to Hex

Convert RGB values to hex color codes. Accepts comma- or space-separated input. Outputs 6-digit or 8-digit hex.

CMYK to RGB

Convert CMYK percentages (cyan, magenta, yellow, key) to RGB and hex for screen use. Print-to-digital workflow.

Color Picker

Pick any color with an interactive picker. See hex, RGB and HSL values update live, then copy in one click.

Color Palette Generator

Generate complementary, analogous, triadic, tetradic and monochromatic color schemes from any seed color.