HSL to HEX Converter
Convert HSL (Hue, Saturation, Lightness) colors to HEX codes for web development. This converter translates the intuitive HSL format to the web-standard HEX format instantly.
Understanding the Conversion
HSL describes colors by hue, saturation, and lightness, while HEX uses hexadecimal RGB values:
| HSL Component | Effect |
|---|---|
| Hue (0-360°) | Determines color |
| Saturation (0-100%) | Determines vibrancy |
| Lightness (0-100%) | Determines brightness |
HSL to HEX Examples
| Color | HSL | HEX |
|---|---|---|
| Red | hsl(0, 100%, 50%) | #FF0000 |
| Sky Blue | hsl(200, 80%, 60%) | #4DA8D9 |
| Lime | hsl(80, 70%, 50%) | #8CD926 |
| Purple | hsl(280, 60%, 40%) | #6B29A3 |
Creating Color Variations
One advantage of HSL is easy variation creation:
| Base: hsl(220, 70%, 50%) | HEX Result |
|---|---|
| Lighter (+20% L) | Pastel version |
| Darker (-20% L) | Deep version |
| Muted (-30% S) | Subdued version |
CSS Usage
``css
/* HSL for design, HEX for compatibility */
:root {
--primary: hsl(220, 70%, 50%);
}
.legacy {
color: #2662BF;
}
`
Use this converter when you've designed with HSL but need HEX for broader compatibility.
HSL and HEX
| HSL | HEX | |
|---|---|---|
| Syntax | hsl(9 100% 64%), or hsl(9, 100%, 64%) in the legacy form | #RRGGBB, or #RGB shorthand, or #RRGGBBAA with alpha |
| Channels | hue 0–360°, saturation 0–100%, lightness 0–100% | red, green, blue — each 0–255 written as two hex digits |
| Precision | Continuous, though it round-trips through 8-bit RGB in practice | 8 bits per channel, 16.7 million colours |
| Support | Universal. | Universal. The 8-digit alpha form needs a 2020-or-later browser. |
| Best for | Building palettes. Changing lightness alone gives you a tint ramp that stays on-hue. | Design handoff, CSS, anywhere a colour is written as a single token. |
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.