Swatchr

How to identify a color you can't name

Color-wheel segments of uneven length radiating from an off-center hub

The trick is to match what you sampled against a standard reference list rather than trying to describe it. Swatchr uses the CSS color keywords, about 140 named colors that every browser and design tool understands. A color you could only point at and call murky yellow-green comes back as Darkolivegreen, with #513C27 attached to it.

Why a name is more useful than a code

Hex codes are precise and useless in conversation. Nobody pictures #7EAE98 when you say it. Cadetblue, though, lands immediately, and the person you are talking to can go and look it up.

Names also make a saved palette scannable. A grid of twenty hex codes all looks the same at a glance, but Sienna, Olive and Rosybrown sitting next to each other tell you what kind of palette you are looking at before you have read a single number.

Swatchr's live camera color picker with the crosshair on a sunflower petal, naming the color Darkkhaki and listing #CCC353, rgb(204, 195, 83), hsl(56, 54%, 56%) and cmyk(0%, 4%, 59%, 20%)
Drag the crosshair anywhere in the viewfinder. The readout updates as you move.

How the match is worked out

Swatchr compares the sampled color to every entry in the CSS keyword table and returns the nearest by straight-line distance in RGB. It is a simple measure rather than a perceptual one, which means it is fast, predictable, and occasionally not the name you would have chosen.

The honest description is approximate. A color halfway between two keywords will pick one of them, and it may not be the one your eye votes for. Take the name as a label for the color, not a claim that they are identical.

The cases where naming breaks down

The CSS list is dense in some regions and thin in others. There are a great many named grays and blues, and comparatively few named browns, so browns get pulled towards Sienna and Rosybrown more often than they deserve.

Very dark and very light colors are the other weak spot. Below about 10% lightness everything converges on black, and the name stops carrying much information. When you are working near either end of the range, read the hex.

Common questions

Are CSS color names an official standard?

They come from the CSS Color specification, which inherited them from the original X11 and SVG keyword lists. Every modern browser supports the same set.

Can it name a paint or Pantone color?

No. Those are proprietary licensed systems with their own reference data, and Swatchr matches against the open CSS keyword list instead.

Try it yourself

Swatchr reads the color of anything your camera can see, or any point in a photo, and hands you the hex, RGB, HSL and CMYK.

Download on the App Store

Related guides