Why the exact pixel matters
A screenshot of a color looks close enough by eye, but "close enough" is not a value you can put in CSS. Matching a brand color, a client's logo, or a shade from a reference photo needs the exact number, and eyeballing it against a color wheel is how you end up half a shade off in a way nobody can quite explain later.
Clicking reads the literal pixel value from the decoded image — no rounding, no guessing. The one place this gets less reliable is a heavily compressed JPEG, where compression blurs small areas toward an average color, so a single pixel in a busy or noisy region can read slightly off from the tone it looks like at a glance. The magnifier below the cursor exists for exactly this: it shows the individual pixels around your click before you commit to one, so you can land on the one that actually represents the color rather than a compression artifact next to it.
One pixel or the whole picture
| Click to pick | Extract palette | |
|---|---|---|
| Reads | One exact pixel | The whole image, grouped |
| Best for | Matching one specific spot | An overview of dominant tones |
| Result | A single color | 5–10 representative colors |
Picking is precision work: a logo color, a product shot, a UI screenshot where you need the exact fill of one button. Palette extraction is the opposite job — it scans the whole image and answers "what colors is this picture actually made of," which is what you want when building a color scheme from a photo or checking whether a design's palette holds together.
How the palette is built
A typical photo contains millions of technically distinct pixel values, and almost none of that variation is meaningful — it is lighting gradients and compression noise around a much smaller set of real colors. Returning the true most common exact pixel values would mostly return noise, so colors are grouped by similarity first: each pixel is reduced to a coarser color bucket, the buckets are counted, and the biggest ones win. Each swatch shown is the average color of every pixel that landed in its bucket, not one lucky pixel, which is what makes it representative rather than arbitrary.
Buckets that are too close to a color already picked are skipped, even if they are individually larger than some other bucket. Without this, a photo with a large blue sky could return four near-identical blues instead of one blue and three colors that actually add information about the rest of the picture.
Reading the values
Every color is shown as HEX, RGB and HSL together, each with its own copy button.
HEX (#2f6df6) is what most CSS and design software expect by default.
RGB is the same value spelled out as three numbers, occasionally what an older tool
wants instead. HSL is the one worth understanding even if you rarely paste it
directly: because it separates hue from saturation and lightness, it makes it easy
to reason about variations of a color — a lighter tint or a more muted version
— in a way HEX and RGB do not.
Nothing leaves your device
The image is decoded and read entirely in your browser using canvas pixel data. Nothing is uploaded, which matters more here than it sounds: reading a color from a client mockup, an unreleased design, or a product photo that has not shipped yet is a strange thing to route through someone else's server just to get a HEX code.