HEX to HSL converter
Convert hex colours to HSL so you can reason in hue, saturation and lightness — the notation that makes building a colour scale straightforward.
- Runs in your browser
- Nothing you enter is sent
- Free, no account
Three, four, six or eight hex digits, with or without the leading #.
Converted from HEX.
Contrast on white
5.17:1
AA for body text
Contrast on black
4.06:1
AA for large text only
| Format | Value | Copy |
|---|---|---|
| HEX | #2563eb | |
| HEX with alpha | #2563ebff | |
| RGB | rgb(37, 99, 235) | |
| RGBA | rgba(37, 99, 235, 1) | |
| RGB (space syntax) | rgb(37 99 235) | |
| HSL | hsl(221.2, 83.2%, 53.3%) | |
| HSLA | hsla(221.2, 83.2%, 53.3%, 1) | |
| HSL (space syntax) | hsl(221.2 83.2% 53.3%) | |
| HSV / HSB | hsv(221.2, 84.3%, 92.2%) | |
| CMYK | cmyk(84.3%, 57.9%, 0%, 7.8%) | |
| Android ARGB | #FF2563EB | |
| SwiftUI | Color(red: 0.145, green: 0.388, blue: 0.922) | |
| Nearest CSS name | royalblue (closest match) |
CSS custom properties
--color: #2563eb; --color-rgb: 37 99 235; --color-hsl: 221.2 83.2% 53.3%;
Your colour values never leaves this tab — check it yourself—
Starting the network probe…
The counter above wraps fetch, XMLHttpRequest and navigator.sendBeacon in this tab and counts every call. It does not block anything — it just reports.
Two ways to verify independently
- Turn off Wi-Fi or enable airplane mode, then use the tool. It keeps working, because the page is already fully loaded.
- Open your browser devtools, switch to the Network tab, clear it, and run the tool. No new row appears.
Why this matters
In 2025 researchers found that popular online formatters had retained tens of thousands of user-submitted snippets — JSONFormatter.org and CodeBeautify together exposed roughly 80,000 saved documents, many containing live cloud credentials, private keys and internal database connection strings, because “format this” quietly meant “upload this”. A separate incident exposed roughly 3.5 million user PDFs on a document-conversion service. The only structural fix is not sending the data in the first place: this site is served under a Content-Security-Policy whose connect-src contains no third-party origin, so a request off this device cannot be made even by accident.
What HSL actually measures
- Hue — a position on the colour wheel in degrees. 0 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta, wrapping back to 360.
- Saturation — how far the colour is from grey, 0% being grey and 100% being fully vivid at that lightness.
- Lightness — 0% is black, 100% is white, and 50% is the pure hue. This is the axis that makes HSL useful and the one people most often confuse with brightness.
The conversion
#2563eb → r=37 g=99 b=235, normalised to 0–1
max = 0.922 (blue) min = 0.145 (red) delta = 0.777
L = (max + min) / 2 = 0.533 → 53.3%
S = delta / (1 - |2L - 1|) = 0.833 → 83.3%
H = 60 × (4 + (r - g) / delta) = 220.9°
hsl(220.9, 83.3%, 53.3%)The hue formula has three branches depending on which channel is the maximum; the one shown is the blue-max case. Every value on this page is computed in full precision and rounded only for display, so hex → HSL → hex returns the original byte.
Building a tint and shade scale
This is the main reason to convert to HSL. Take the hue and saturation and vary lightness in even steps; you get a coherent scale in one pass instead of guessing hex codes.
| Step | HSL | Typical use |
|---|---|---|
| 50 | hsl(221, 83%, 96%) | Tinted background |
| 100 | hsl(221, 83%, 91%) | Hover on a tinted background |
| 300 | hsl(221, 83%, 74%) | Disabled state, borders |
| 500 | hsl(221, 83%, 53%) | The base colour |
| 700 | hsl(221, 83%, 40%) | Hover on a solid button |
| 900 | hsl(221, 83%, 24%) | Text on a tinted background |
One refinement worth applying: reduce saturation slightly at both extremes. At very high lightness a fully saturated hue looks chalky, and at very low lightness it looks muddy. Dropping saturation by 10–20 points at the ends produces a scale that reads as one family.
Harmony from the hue number
- Complementary: add 180 to the hue.
- Analogous: ±20 to ±40, for a low-contrast, related palette.
- Triadic: ±120.
- Split complementary: 180 ± 30, which is usually easier to use than a straight complement.
HSL is not perceptually uniform
The honest caveat. Two colours with the same HSL lightness can look very different in brightness:
hsl(60, 100%, 50%) (yellow) is visibly lighter than hsl(240, 100%, 50%)
(blue), because human vision is far more sensitive to green than to blue. So a scale built by
varying L alone will not have even perceived steps across different hues, and equal L does not mean
equal contrast. For work where that matters, Oklch is the right tool; HSL remains the practical
choice for reasoning about a single hue family.
Questions
Why work in HSL at all?
Because it maps onto the things designers actually change. A darker version of a colour is the same hue and saturation with a lower lightness; a muted version is the same hue with less saturation. In hex, both of those are guesswork.
How do I build a tint and shade scale?
Take the hue and saturation from the conversion and vary lightness in even steps — 95%, 90%, 80% and down to 15%. Reduce saturation slightly at the extremes, or the lightest tints look chalky and the darkest shades look muddy.
What does the hue number mean?
A position on the colour wheel in degrees: 0 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta. Adding 180 gives the complementary colour; ±30 gives analogous colours.
Is HSL the same as HSB or HSV?
No, and mixing them up is a common source of confusion. HSL lightness runs from black through the pure hue at 50% to white at 100%. HSV/HSB brightness runs from black to the pure hue at 100% and never reaches white. Both values are shown in the table.