Advertisement

Tutorials8 min read

Sampling an Exact Colour, and What Alpha Tells You About Your Cutout

A pixel is smaller than your cursor, which is why naive colour picking goes wrong. Beyond hex and RGB, the alpha readout is the fastest diagnosis available for a cutout that looks off: it distinguishes a binary mask, an uncertain interior, leftover background and real edge contamination in about five seconds.

By · Part of the Browser-local editing workflows topic cluster

Somebody sends you a logo as a flattened PNG and asks for the brand colour. Or you need the exact blue from a product photo so a button matches it. Or a client says the background should be "the same grey as the packaging". Every one of these is the same small problem: read the precise value of one pixel.

The colour picker does that, and the two details that make it usable are the magnifier and the alpha readout.

A pixel is smaller than your cursor

The reason naive colour picking goes wrong is that you almost never click the pixel you think you are clicking.

Any photographed or compressed image has noise. Two pixels that look identical can differ by several values in each channel. Along any edge there is antialiasing, which means a band of pixels that are a blend of both sides and match neither. At normal zoom, your cursor covers a dozen pixels and you have no way to tell which one you are on.

That is what the 10x magnifier fixes. It shows the neighbourhood around the cursor enlarged, so you can see whether you are on flat colour or on a transition, and land on the pixel you meant.

It also makes a common mistake visible: sampling a "solid" area that turns out to be a gradient. Plenty of brand assets have a gentle gradient that is invisible at full size, and the magnifier shows the value drifting as you move.

Four representations of the same value

The readout gives hex, RGB, HSL and alpha.

Hex is what you paste into CSS or a design tool. It is the default for a reason.

RGB is the same numbers in a form you can do arithmetic on. Useful when you are comparing two samples and want to know how far apart they are.

HSL is the one people underuse. It separates hue from saturation from lightness, which is what you want when the question is not "what is this colour" but "why do these two not match". Two blues that look wrong together often have nearly the same hue and very different saturation, and HSL shows that instantly where hex does not.

Alpha is the one that saves real time on cutouts, and it deserves its own section.

Alpha tells you whether your edge is real

If you have removed a background and something looks off, sampling alpha along the edge is the fastest diagnosis available.

A clean cutout has a short, orderly transition: fully opaque inside the subject, a few pixels of intermediate alpha at the boundary, fully transparent outside. Sampling across an edge should show that progression.

What you are looking for instead:

A hard jump from 255 to 0 with nothing between. The mask is binary. The edge will look jagged and cut out, and feathering is the fix.

Intermediate alpha far inside the subject. The model was uncertain about an interior region. It will show as a faint see-through patch over whatever background you place behind it, and it is invisible against white.

Fully opaque pixels well outside the subject. Leftover background that the mask kept.

Colour that does not belong at partial alpha. This is edge contamination. A pixel that is half transparent and carries the colour of the old background is what produces a fringe when you composite onto a new one. Sampling it tells you the fringe is in the file, not in the viewer.

That last one is worth emphasising because it is so often misdiagnosed. People see a green halo, assume the export is broken, and re-export in a different format. The halo was in the pixels. The picker proves it in about five seconds.

Sampling for a palette rather than a value

If what you actually want is the set of colours in an image rather than one specific pixel, the picker is the wrong tool and the colour extractor is the right one. It clusters the image and gives you the dominant colours with their proportions.

The rule of thumb: the picker answers "what is this", the extractor answers "what is in here". People reach for the picker and click twelve times when they wanted the extractor once.

Pinning samples for comparison

Single samples are less useful than pairs. The real questions are comparative: does this match, is this the same grey, why does this look warmer than that.

Collecting several samples before deciding is the normal workflow, and exporting them gives you something to paste into a spec or a stylesheet rather than transcribing hex codes by hand and getting one character wrong.

Nothing is uploaded

The image is decoded in your browser and the pixel values are read from it there. No copy is sent anywhere, which matters more than it sounds for this particular tool: the images people need exact colours from are frequently unreleased product shots, client brand assets, and packaging that has not been announced.

A short method

  1. Zoom in and use the magnifier rather than trusting the cursor.
  2. Sample a flat interior area, not near an edge, when you want a subject's colour.
  3. Take three samples nearby and check they agree. If they do not, you are on a gradient or on noise.
  4. Read HSL when two colours refuse to match, not hex.
  5. On a cutout, sample across the boundary and watch alpha, then sample the colour at partial alpha to check for contamination.
  6. If you want a palette rather than a pixel, use the colour extractor instead.

Applies to NSS Background Remover v2.4.0, the release that was current when this article was published.

Was this article helpful?

Your answer is saved in this browser only. This control makes no network request and does not send the answer to an NSS feedback endpoint.

Found this useful?