Tool
What the HEX to HSL Converter does
HEX to HSL Converter: converts HSL, HEX and RGB from Pick a colour.
From Pick a colour, this tool derives HSL, HEX and RGB. You can nudge a single number and watch the effect straight away.
Most people who open the HEX to HSL Converter are anyone checking a colour for legibility. Contrast failures are the most common accessibility problem on the web, and the easiest to fix.
There is no account, no upload and no server round trip, because the page does the work itself.
The method, a field-by-field reference and a worked example built from the defaults are all on this page.
What do the HEX to HSL Converter fields mean?
The HEX to HSL Converter uses 1 input. Pre-filled inputs double as documentation: each one shows what a reasonable value looks like.
| Field | What to enter | Default |
|---|---|---|
| Pick a colour | optional | #2563eb |
How does the HEX to HSL Converter work?
Each output is derived from the inputs above in a single pass; there is no hidden state carried between runs, so the same inputs always give the same conversion.
Nothing is computed until the inputs pass their checks, so you will not get a confident answer built on a typo.
What a typical run looks like
You provide: Pick a colour
What happens: the file is read into memory by your browser, processed locally, and offered back as a download. It is never uploaded.
You get back: a download link for the new file and a short note on what changed.
Timing comes down to your own hardware, and the practical size limit is how much memory the browser will hand the tab.
From hex notation to HSL
Hex is a compact way of writing RGB bytes, nothing more. Converting to HSL does not change the colour. It changes the coordinate system into one where hue, vividness and lightness are separate numbers you can edit independently.
| Hex | #RRGGBB | two hex digits per channel, 0 to 255 |
|---|---|---|
| Shorthand | #RGB | #2CF expands to #22CCFF |
| With alpha | #RRGGBBAA | eighth and ninth digits are opacity |
| Example | #2563EB | hsl(221, 83%, 53%) |
Worth knowing
- Hex and RGB are the same numbers in different bases: #2563EB is rgb(37, 99, 235).
- The conversion is exact in both directions, subject only to rounding when HSL percentages are stored with limited decimal places.
- Editing in HSL then converting back is the practical reason to do this. Darkening a colour means subtracting from L, which has no simple equivalent in hex.
- CSS accepts both notations directly, so conversion is for your convenience rather than a technical requirement.
How to use it
- Fill in Pick a colour.
- Live output means you can search for a target value by nudging an input up and down.
- The panel reports HSL, HEX, RGB, CMYK and HSV.
- Copy Link puts the current inputs in the URL, so bookmarking it brings the same numbers back.
What this tool does not do
- Conversions between colour spaces with different gamuts are approximate at the edges.
- Colours render differently across displays; the values are exact but the appearance is not guaranteed.
- Results are informational: check anything consequential against a second source.
Frequently asked questions
Just Pick a colour. Every box already holds a working value, which means a single edit is enough to get a meaningful answer.
It is not stored or transmitted. The calculation happens locally and leaves no trace with us.
No. There is no account, no usage cap and no trial period. The site is funded by advertising rather than by charging for the tools.
The output is deterministic. The same inputs always give the same answer, and the method is documented above so you can check it.