Reading colour out of an image
Your browser can decode an image into a raw array of red, green, blue and alpha values, one set per pixel. This tool does exactly that, then answers two questions against the result: what colour is at this point, and what handful of colours best summarises the whole thing.
The buffer is built from a downscaled copy — at most 640 pixels on the long edge. Reading a 40-megapixel photograph at full resolution would allocate around 160MB for no benefit, since a summary does not get more accurate with more samples and a cursor cannot be positioned to sub-pixel precision anyway.
How the palette is built
The dominant colours come from median cut, the same family of algorithm that GIF encoders use to reduce an image to 256 colours. Every qualifying pixel becomes a point in three-dimensional colour space. The algorithm finds the group spanning the widest range in any one channel, sorts it along that channel, and splits it at the median. Repeat until you have as many groups as you want swatches, then average each group.
Splitting the widest group rather than the largest one is the important detail. It stops a big flat sky from consuming every slot and leaves room for the smaller but more distinct colours that actually characterise the image.
Because there is no randomness anywhere in that process, the same image always produces the same six swatches. That is a deliberate choice over k-means, which is often slightly better at clustering but seeds randomly and can hand you different hex codes on a second run — an unpleasant surprise when you have already pasted the first set into a stylesheet.
HEX, RGB and HSL
HEX is the compact form CSS and every design tool understands. RGB is the same information in decimal, useful when a value has to be calculated or passed to code. HSL restates it as hue, saturation and lightness.
HSL is worth reaching for when you need to derive colours rather than just record them. Producing a hover state, a disabled variant, or a matching darker border is a small adjustment to the lightness value in HSL, and almost impossible to do by inspection in HEX.
Practical uses
- Matching a site's accent colour to a logo or product photo
- Sampling a colour from a screenshot when you have no access to the original file
- Building a palette from a reference photograph for an illustration or deck
- Checking whether a brand colour actually appears in the imagery that surrounds it