Tool
What the HSL Converter does
HSL Converter: converts HSL, HEX and RGB from Pick a colour.
Enter Pick a colour and the HSL Converter reports HSL, HEX and RGB. Edit a field and the answer updates in place.
Typical users are designers matching a brand colour. A value copied by eye is a value that will be slightly wrong.
There is no back end here. The calculation runs where you are sitting, not on a server somewhere.
The meaning of each field, the formula in use, and a worked example that starts from the default inputs are all further down.
What do the HSL Converter fields mean?
The HSL Converter uses 1 input. You can work from the defaults, or clear them and start fresh, both work.
| Field | What to enter | Default |
|---|---|---|
| Pick a colour | optional | #2563eb |
How does the 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.
Validation is deliberately strict: silently coercing a bad value is how wrong numbers get trusted.
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 processed file plus a short status summary in the tool panel.
The tab does the processing, so speed tracks your hardware and very large files fail on memory rather than on a quota.
HSL: the human-friendly model
HSL rearranges RGB into three axes people can reason about: which colour it is, how vivid, and how light. It describes exactly the same colours as RGB. The transformation is lossless and reversible.
| Hue | 0 to 360° | position on the colour wheel |
|---|---|---|
| Saturation | 0 to 100% | 0 is grey, 100 is fully vivid |
| Lightness | 0 to 100% | 0 is black, 50 is pure hue, 100 is white |
| Gamut | Identical to sRGB | a re-coordinate, not a different space |
Worth knowing
- HSL is why generating a palette is easy: rotate the hue and hold saturation and lightness, and the colours stay related.
- Lightness is not perceptual brightness. Yellow at 50% lightness looks far brighter than blue at 50%, because the eye is much more sensitive to green wavelengths.
- That is why HSL lightness cannot be used to judge contrast. Use the WCAG relative luminance calculation instead.
- HSV (or HSB) is a different model despite the similar name: its third axis is Value, where 100% gives the pure hue rather than white.
Read next: Colour Contrast and WCAG: The Ratio, the Thresholds, What They Miss
How to use it
- Enter Pick a colour.
- Because it recalculates as you type, you can dial a value in rather than guessing and re-running.
- You get HSL, HEX, RGB, CMYK and HSV back.
- Copy Link is the quickest way to send the exact scenario to someone else.
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.
- Assumptions built into the method are stated above, but they are still assumptions.
Frequently asked questions
Only Pick a colour. Nothing starts empty, meaning you can explore the calculation before committing to real figures.
No record is kept. We never receive what you type, so there is nothing on our side to retain.
Nothing at all. There is no registration, no paywall and no per-use quota.
It matches what you would get working it out by hand, with fewer opportunities to slip.