What the three formats are for
HEX is what you paste into CSS and design tools. RGB is the same colour written as three numbers, which is what you need when a value has to be calculated or an alpha channel added. HSL describes hue, saturation and lightness separately, and is far easier to work with when you want a lighter version of the same colour rather than a different one.
To build a hover state, take the HSL and move the lightness. Doing the same by nudging hex digits is guesswork.
Why the colour you pick may not be the colour you saw
JPG compression averages colour across blocks, so a pixel from a compressed screenshot can be a shade off the original. Sample a few pixels from the middle of a flat area rather than one near an edge, where the compression artefacts live.
Screenshots of a photograph carry the same problem twice over. When exact match matters — matching a brand colour — ask for the value rather than sampling a picture of it.
From one colour to a palette
Once you have a colour, the palette generator builds harmonies around it, and the contrast checker tells you whether text on it will actually be readable — worth doing before committing a brand colour to body text.
Frequently asked questions
Why is the colour slightly different from the original?
JPG compression averages colour over small blocks, so pixels drift, especially near edges. Sample from the middle of a flat area, or ask for the real value if it has to match exactly.
Can I pick a colour from anywhere on my screen?
Not from a web page — browsers do not allow reading the rest of your screen. Take a screenshot and drop it in, which comes to the same thing.
What is HSL for?
Making variations. Keep the hue and saturation, change the lightness, and you have a matching lighter or darker shade — much easier than editing hex digits.
Is my image uploaded?
No. It is drawn to a canvas locally and the pixel values are read from there, so a screenshot of unreleased work stays on your machine.
Something wrong with this tool, or an idea for it? Tell us