Every browser can turn a CSS declaration like color: tomato; into an exact pixel value, which raises an obvious question: where did "tomato" get assigned to that specific shade of red-orange, and what happens when you pick a color that isn't on the list at all?
Where the 147 Names Come From
CSS's named colors aren't a marketing invention — they're a formal part of the CSS Color specification, sometimes called the "extended color keywords." The list of 147 names, including familiar ones like Tomato and CornflowerBlue, was standardized so that developers could reference common colors by a memorable word instead of a six-digit hex code, and so that every browser renders "MediumSeaGreen" as the exact same RGB value. It's a fixed, finite list — no browser lets you invent a new named color on the fly.
How "Nearest" Matching Works
When a color doesn't exactly match one of the 147 names, finding the "closest" one requires a way to measure distance between colors. The straightforward approach treats each color as a point in three-dimensional space, with red, green, and blue as the three axes, and calculates the plain Euclidean (straight-line) distance between your color and every named color. Whichever named color has the smallest distance wins. It's simple to compute and easy to reason about, which is why it's a common default approach.
Why "Close" Colors Can Look Different
Plain RGB distance has a known limitation: it isn't perceptually uniform. The human eye doesn't perceive equal-sized numeric changes in R, G, and B as equally noticeable — it's markedly more sensitive to small shifts in green than to similar-sized shifts in blue, for instance. That means two colors that are mathematically the same distance apart in RGB space can look nearly identical in one part of the color spectrum and clearly distinguishable in another. Color spaces designed specifically to model human perception (like CIELAB) correct for this, at the cost of more complex math — RGB distance is the simpler, faster trade-off most lightweight color tools make.
Naming Colors Consistently in Code
Named colors are most useful for quick prototyping, debugging, or anywhere readability matters more than exact brand-color precision — writing border: 1px solid tomato; is more legible at a glance than a hex code. For production design systems, though, most teams still define their own custom hex or HSL values rather than relying on the standard 147, since brand colors rarely land exactly on one of the predefined names.
Finding a Color Name Instantly
Pick or paste any color and instantly see which of the 147 standard CSS names it's closest to, and by how much, with the free Color Name Finder.
FAQ
Where does the list of color names come from? All 147 official CSS extended color keywords, like "CornflowerBlue" and "MediumSeaGreen" — the exact same standardized named colors browsers recognize when used directly in CSS.
How is the "nearest" match determined? By the straight-line (Euclidean) distance between your color and each named color in RGB space — the named color with the smallest distance is shown as the closest match. This is a simple, common approach, though it doesn't perfectly account for how the human eye perceives color differences.
Why can two colors with a similar RGB distance look very different to the eye? RGB space isn't perceptually uniform — the human eye is far more sensitive to small changes in some hues (especially greens) than others, so a numerically small RGB distance in one part of the color space can look far more noticeable than the same-sized distance elsewhere.
Will the exact color I enter always have a matching name? Only if it's one of the 147 named colors exactly — for any other color, this tool finds and shows the closest named color along with exactly how different it is.