Color Name Finder

What this tool finds and why it is useful

CSS lets you write colors as human-readable names like tomato or steelblue instead of hex codes. There are 140 such standard named colors recognised by every modern browser, inherited from the old X11 color list and the SVG specification. The trouble is that an arbitrary color — say the #3A86FF from a brand palette — almost never matches a name exactly. This tool solves that: enter any color as hex or with RGB sliders, and it tells you the closest CSS named color, plus the next four runners-up, each with a numeric distance so you can judge how good the match really is.

How "closest" is calculated

Every color is a point in three-dimensional space with red, green, and blue axes, each running 0 to 255. To find the nearest name, the tool measures the straight-line Euclidean distance between your color and each of the 140 named colors, then sorts by that distance. The formula is the 3-D Pythagorean theorem:

distance = √((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²)

A distance of 0 means an exact match. The maximum possible distance is the diagonal from black to white, √(255² + 255² + 255²) ≈ 441.7, which is why the tool labels the scale "0 = exact match, 441.7 = max." A result under about 10 is visually indistinguishable; under 25 is a close cousin; above 60 the name is only a rough neighbourhood.

A worked example

Take the default color #3A86FF, which is rgb(58, 134, 255). The tool compares it against all 140 names. The nearest is dodgerblue at #1E90FF = rgb(30, 144, 255). Plugging into the formula:

√((58−30)² + (134−144)² + (255−255)²) = √(784 + 100 + 0) = √884 ≈ 29.7

So dodgerblue is reported with a distance of about 29.7 — close enough to be the best CSS name for that blue, but not a perfect match, which the number honestly tells you. The Top 5 list then shows the next-nearest blues so you can pick the name whose hue feels right, not just the one the math ranked first.

A caveat: RGB distance is not perceptual distance

Euclidean RGB distance is fast and intuitive, but it does not perfectly mirror how human eyes judge similarity. Our vision is far more sensitive to differences in green than in blue, so two colors with the same numeric distance can look noticeably different. Perceptual color spaces such as CIELAB, and metrics like CIEDE2000, model this and give more accurate "looks similar" results — at the cost of much heavier math. For naming a color and browsing alternatives, RGB distance is more than good enough; just trust your eyes over the number when a runner-up looks like a better fit.

When CSS color names are worth using

• Readable prototypes. color: crimson tells a teammate more at a glance than color: #DC143C, which speeds up reviews of early-stage markup.
• Quick placeholders. Named colors are perfect for sketching layouts before a final palette is chosen.
• Documentation and teaching. Explaining a design system reads more naturally with names.
• Consistency checks. Finding that a stray hex value is "nearly gray" can reveal an off-brand color that should be snapped to a system token.

All 140 names work everywhere CSS does — in HTML, SVG, and JavaScript — so there is no compatibility cost to using them.

Tips for getting the most out of it

• Drag the sliders to explore. Nudging one channel and watching the nearest name change builds an intuition for where the named colors sit in RGB space.
• Use the searchable grid. All 140 colors are listed below; type part of a name to filter, and click any swatch to load it and see its exact values.
• Watch the distance, not just the name. A large distance means there simply is no close CSS name and you should keep the hex value in production.
• Remember the duplicates. Several colors share two spellings — gray/grey, aqua/cyan, fuchsia/magenta — and resolve to identical hex codes.

The full color list is built into the page and every calculation runs in your browser, so nothing you enter is sent anywhere.