HSL to RGB Converter

Why HSL-to-RGB Conversion Exists

HSL (Hue, Saturation, Lightness) and RGB (Red, Green, Blue) are two different colour models with fundamentally different purposes. HSL is designed for human reasoning: you can adjust lightness alone and keep the hue intact, which is why designers build themes and colour palettes in HSL. RGB, on the other hand, is the working space for on-screen colour maths—the exact numbers a screen’s subpixels use to emit light.

The tool on this page bridges that gap without introducing colour shift. The conversion from HSL to RGB is lossless: every valid HSL value maps to a single RGB triplet within the displayable range. Unlike conversions from LAB or CMYK to RGB, there is no out-of-gamut clipping. That means no unexpected colour shift occurs when you convert back and forth. Changing the lightness in HSL does not alter the hue—something that cannot be said for HSV or many other models. This property makes HSL the natural choice for generating harmonious palettes, and this page gives you the exact RGB numbers needed to implement them in code.

How the Conversion Works

The conversion follows a standard algorithm originally defined in CSS Colour Level 3 and adopted by most colour libraries. The steps are:

1. Normalise the saturation and lightness to decimal values: S = S% / 100, L = L% / 100.
2. Compute chromaticity: C = (1 - |2L - 1|) × S.
3. Compute X = C × (1 - |(H/60) mod 2 - 1|).
4. Determine the primary colour segment based on the hue value (0–360):
   • If H ∈ [0, 60): R = C, G = X, B = 0
   • If H ∈ [60, 120): R = X, G = C, B = 0
   • If H ∈ [120, 180): R = 0, G = C, B = X
   • If H ∈ [180, 240): R = 0, G = X, B = C
   • If H ∈ [240, 300): R = X, G = 0, B = C
   • If H ∈ [300, 360): R = C, G = 0, B = X
5. Calculate m = L - C/2.
6. Add m to each of R, G, B to get final values in.
7. Multiply by 255 and round to integer to obtain the 0–255 RGB output.

For the example given—243, 75%, 59%—the algorithm produces RGB 79, 70, 229. The math is exact; no approximations or fallbacks are needed. Because the conversion never leaves the sRGB gamut, the result is always a valid screen colour.

Input Rules and Error Handling

The tool expects the HSL value in a specific format: hue as a number from 0 to 360, followed by two percentage values for saturation and lightness. The comma separation shown in the prompt—243, 75%, 59%—is the canonical form, but the parser is tolerant of whitespace and missing commas as long as the three components are clear.

If you enter an invalid value—for example, a hue of 400, a saturation of 150%, or a string like “blue, 50%, 50%”—the tool displays the error message:

Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.

All output fields update instantly when a valid HSL is entered. The tool does not require you to press a button; it responds to every keystroke. The processing happens entirely in your browser—nothing you type is uploaded to a server. Colour conversions are performed locally using JavaScript, so you can use the tool offline (if the page is cached) and with complete privacy.

The Full Set of Output Models

Entering an HSL value fills in five additional colour spaces:

HEX is the most common format for CSS and web design—a compact six-digit hexadecimal representation of the RGB triplet.

RGB (0–255) is the native format for screens and is used in CSS rgb() functions, image libraries, and hardware programming.

HSL is echoed back as a consistency check.

HSV (Hue, Saturation, Value) is closely related to HSL but differs in how lightness/value is computed. Many graphics applications use HSV for colour pickers.

CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive model used in printing. The values shown here are an on-screen estimate. They are calculated using a standard conversion that assumes ideal ink behaviour and a generic paper stock. Real CMYK values will differ depending on the printer profile, ink set, paper type, and halftoning method. Never use these numbers for professional print production without first verifying against a physical colour swatch or a printer’s ICC profile.

LAB (CIELAB) is a perceptual colour space where L is lightness, a is green–red, and b is blue–yellow. The conversion from RGB to LAB is not trivial—it requires a transformation through XYZ. The tool provides this value for designers working with colour science or needing to quantify colour differences (Delta E). Note that the sRGB gamut is smaller than the full LAB gamut, so some LAB values may be outside sRGB when converting back.

Who Benefits from This Tool

• Designers building colour palettes or themes. HSL makes it easy to create a monochromatic scheme by keeping hue fixed and varying lightness and saturation. But the final CSS or design asset usually requires RGB or HEX values. This tool eliminates mental arithmetic.
• Front‑end developers transferring colour values from design tools. Many UI design tools (Figma, Sketch, Adobe XD) offer HSL output. When copying into CSS rgb(), rgba(), or JavaScript canvas, you need integer RGB values. Copying from the tool avoids rounding errors.
• Anyone who reasons about colour in human-friendly terms. If you think “I want a moderately light purple with low saturation” it is far easier to set HSL to 270, 20%, 70% than to guess an RGB combination. The tool provides the screen-ready numbers without breaking that mental model.
• Accessibility auditors and theme developers. Lightness in HSL corresponds closely to perceived brightness, so you can adjust lightness to meet contrast ratios (WCAG) while keeping the hue consistent. The RGB output then plugs directly into contrast-checking tools.

Common Mistakes and Misconceptions

Mistaking HSL for HSV. HSL and HSV are often conflated. In HSL, lightness L ranges from black (L=0%) to white (L=100%). In HSV, Value V ranges from black (V=0%) to maximum brightness (V=100%) but full white corresponds to S=0%, V=100%. The same numeric input produces different output in each model. For example, HSL (0, 100%, 50%) is pure red; HSV (0, 100%, 50%) is a dark red (since value is only 50%). Always verify which model your source uses.

Assuming CMYK output is print-ready. The CMYK estimate is based on a generic sRGB-to-CMYK formula (often using the “naive” model: C=1-R, M=1-G, Y=1-B, K=min(C,M,Y)). Professional print shops employ UCR/GCR and black-channel generation that produce different separations. Treat the tool’s CMYK values as a rough guide for on‑screen proofing only.

Entering values out of range. Hue must be 0–360. Values like 361° or −30° are not valid. Some other tools wrap hue modulo 360, but this page rejects them with the error message. Saturation and lightness must be percentages (the % sign is not optional).

Assuming losslessness for all round‑trips. HSL → RGB → HSL is lossless because the forward and inverse algorithms are mathematically reciprocal within sRGB. However, if you round the RGB values (e.g., from a different tool), the reverse conversion may differ by ±1 in hue or ±0.5% in saturation/lightness. This tool avoids that by performing full‑precision computation.

FAQ

Can I convert CMYK directly to RGB with this tool?
No. The tool only accepts HSL as input. To convert CMYK to RGB, you would first need a CMYK-to-HSL conversion elsewhere. However, the tool does show CMYK output for any HSL input.

Why is the CMYK output only an estimate?
Because CMYK values depend on the physical printing process—ink reflectance, paper absorption, dot gain, and the printer’s colour management. The tool uses a generic sRGB-to-CMYK transform that assumes ideal subtractive mixing. For print production, always obtain CMYK values from a dedicated profile (e.g., FOGRA39, SWOP).

Is the conversion reversible?
Yes, for HSL ↔ RGB within the sRGB gamut. Because the conversion is mathematically exact and no clipping occurs, you can convert back and forth indefinitely and always recover the original values (except for rounding in the display).

What happens if I enter a hue of 0 vs. 360?
Both are valid and produce the same colour (pure red). The algorithm treats 0 and 360 identically because hue is periodic. However, the displayed HSL output always normalises to 0 for red (not 360).

Can I use this for print colours?
Only as a rough preview. The RGB values displayed are for on-screen use (sRGB). If you need to specify colours for printing, you should work in CMYK or spot colours from the outset, because the sRGB gamut does not cover all printable colours.

Why does lightness in HSL keep the hue intact, but changing lightness in RGB does not?
In RGB, adjusting brightness often means scaling all three channels equally, which shifts the relative proportions and thus the perceived hue (e.g., dark blue becomes purple when you reduce red). In HSL, lightness is independent of hue and saturation by design—the model is built to allow exactly that kind of reasoning. That is the core reason this page exists.