Calculator
What the Color Picker does
Color Picker: calculates HEX, RGB and HSL from Pick a colour.
Enter Pick a colour and the Color Picker reports HEX, RGB and HSL. The result recalculates on every keystroke without a button press or a page reload.
It is mostly used by designers matching a brand colour. A value copied by eye is a value that will be slightly wrong.
Everything happens inside this page. Nothing you type is sent to a server, and there is nothing for us to store.
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 Color Picker fields mean?
The Color Picker uses 1 input. The defaults are there to be replaced. They exist so the tool is never showing an empty result.
| Field | What to enter | Default |
|---|---|---|
| Pick a colour | optional | #2563eb |
How does the Color Picker 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 calculation.
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.
Reading the four notations
A colour picker shows the same colour in several notations at once. They are interchangeable for screen work, which one you use is a question of what you want to edit.
| Hex | #2563EB | most compact, the web default |
|---|---|---|
| RGB | rgb(37, 99, 235) | same numbers, base 10 |
| HSL | hsl(221, 83%, 53%) | best for adjusting |
| CMYK | 84, 58, 0, 8 | print only, approximate |
Worth knowing
- Hex, RGB and HSL describe exactly the same sRGB colours. Converting between them changes nothing about what you see.
- Use HSL when you want to modify: lighten, desaturate, shift hue. Each is a single-number change there and a three-number puzzle in hex.
- The CMYK figures shown by any picker are an approximation without an ICC profile, and should not be used for final print artwork.
- Picking a colour tells you nothing about whether text on it will be readable. Check the contrast ratio separately.
Read next: Colour Contrast and WCAG: The Ratio, the Thresholds, What They Miss
How to use it
- Enter Pick a colour.
- Each keystroke triggers a fresh calculation, which is cheap because it happens locally.
- You get HEX, RGB, HSL and CMYK back.
- Both Copy Link and Print capture the current state, so pick whichever suits how you file things.
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.
- The result reflects the moment you ran it; anything that changes over time is not tracked.
Frequently asked questions
Only Pick a colour. A starting value is in place for each, meaning you can explore the calculation before committing to real figures.
No. There is no upload step, no database, and nothing to delete afterwards.
It costs nothing, and there is no limit on repeat use.
It matches what you would get working it out by hand, with fewer opportunities to slip.