Reading a colour from the image itself
Matching a colour by eye against a swatch never quite works — surrounding colours shift your perception, and two shades that look identical side by side diverge once separated. Reading the pixel directly removes the judgement entirely.
The [msm_tool slug="color-picker"] draws your image onto a canvas and reports the exact value under each click, as hex and as RGB. A screenshot of a site gives you their precise brand colour rather than your best approximation of it.
Large images are scaled, and that changes edge pixels
Images wider than eight hundred pixels are scaled down to fit the canvas. That keeps large photographs usable in the page, and it has one consequence worth knowing.
The pixel you click belongs to the scaled image, not to the original file. On a flat area of colour the two are identical. Along an edge — where scaling blends neighbouring pixels together — the value can differ slightly from what is in the source.
The fix is simple: click the middle of a region rather than near a boundary.
Photographs have no single colour
What looks like one shade of sky is dozens of neighbouring values, varying with gradient, noise and compression. The first click is not a representative sample; it is one pixel out of many.
Sample several points across the area and choose, or take a value from the flattest, most central part. If you need a genuine average, that is what the palette extractor does.
Compression shifts colours
JPEG discards colour information more aggressively than brightness, and it does so most around edges. A JPEG screenshot of a brand colour is an approximation of that colour, sometimes off by several values.
If you need an exact match, take a PNG screenshot or get the original asset. For most purposes the difference is invisible; for matching a brand colour precisely, it is the difference between right and nearly right.
Hex or RGB
They describe the same colour. Hex is the convention in CSS and design tools and is more compact. RGB is easier to adjust by hand — you can see which channel to move — and it is what you need when adding transparency, since rgba() takes an alpha value where a hex code needs eight digits.
Neither is more accurate. Use whichever your project already uses.
Colour profiles are not accounted for
The value reported is what the browser drew. An image in a wide-gamut profile such as Display P3 may report values that differ from what a design tool shows for the same file, because the tool is interpreting the profile and the canvas is not.
For screenshots and web images this rarely matters — they are almost always sRGB. For photographs straight from a camera, it can.
Where this fits
Picking a colour is the start rather than the end. Two things usually follow:
- Check it against its background. A brand colour read from a screenshot may not carry text at the size you intend to use it.
- Build the scale. One colour is not a palette; an interface needs the tints, shades and neutrals derived from it.
Nothing is uploaded — the image is drawn and read in your browser — so picking colours out of an unreleased mockup is safe here in a way it is not on a service that receives the file.