HSL to RGB Converter
Convert HSL (Hue, Saturation, Lightness) colors to RGB (Red, Green, Blue) values. RGB is the fundamental color model for digital displays and is widely supported across programming languages and design tools.
Why Convert HSL to RGB?
| Scenario | Reason |
|---|---|
| Programming | Many APIs expect RGB values |
| Canvas/Graphics | Drawing APIs often use RGB |
| Color calculations | RGB math is straightforward |
| Legacy code | Older systems only support RGB |
HSL to RGB Examples
| Color | HSL | RGB |
|---|---|---|
| Red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| Cyan | hsl(180, 100%, 50%) | rgb(0, 255, 255) |
| Orange | hsl(30, 100%, 50%) | rgb(255, 128, 0) |
| Lavender | hsl(240, 67%, 94%) | rgb(230, 230, 250) |
Conversion Algorithm
The HSL to RGB conversion involves: 1. If S = 0, color is grayscale: R = G = B = L 2. Otherwise, calculate based on hue sector (0-60°, 60-120°, etc.) 3. Apply saturation and lightness adjustments
Using RGB in Code
``javascript
// After conversion from HSL
const color = {
r: 255,
g: 128,
b: 64
};
// Use in canvas
ctx.fillStyle = rgb(${color.r}, ${color.g}, ${color.b});
`
Use this converter when working with systems that require RGB color values.
HSL and RGB
| HSL | RGB | |
|---|---|---|
| Syntax | hsl(9 100% 64%), or hsl(9, 100%, 64%) in the legacy form | rgb(255 99 71) in modern CSS, rgb(255, 99, 71) in the legacy comma form |
| Channels | hue 0–360°, saturation 0–100%, lightness 0–100% | red, green, blue — 0–255 or 0–100% |
| Precision | Continuous, though it round-trips through 8-bit RGB in practice | 8 bits per channel as normally written; CSS accepts fractional values |
| Support | Universal. | Universal. The space-separated form needs a 2020-or-later browser. |
| Best for | Building palettes. Changing lightness alone gives you a tint ramp that stays on-hue. | Programmatic colour manipulation, canvas work, image pixel data. |
A Worked Example
Taking CSS tomato through every format:
| Format | Value |
|---|---|
| HEX | #FF6347 |
| RGB | rgb(255, 99, 71) |
| RGBA | rgba(255, 99, 71, 0.5) |
| HSL | hsl(9, 100%, 64%) |
| HSB | hsb(9, 72%, 100%) |
| CMYK | cmyk(0%, 61%, 72%, 0%) |
Doing It in Code
`javascript
// HEX to RGB
const hexToRgb = (hex) => {
const n = parseInt(hex.replace('#', ''), 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};
// RGB to HEX
const rgbToHex = (r, g, b) =>
'#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
`
Modern CSS can do a lot of this without any conversion at all: color-mix() blends two
colours, and relative colour syntax — hsl(from var(--brand) h s calc(l + 10%)) — derives
a lighter shade without you ever computing one.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.