Color Name Finder

The Color Name Finder maps any hex value to the closest CSS named color and shows the full breakdown of that name, including its hex, RGB, and HSL values and a numeric distance score. It is useful when you have a hex from a design file and want to know whether a standard name is close enough to use, or when you are browsing the named-color palette and want to see what each name actually looks like.

How to Use

• Type a hex code into the input, with or without #, or use the native color picker to choose one visually.
• Press Find Name to run the comparison against all 148 named colors.
• Read the result card: color name, swatch, hex, RGB, HSL, and the distance score.
• Use the search box to filter the named-color list by substring. Typing dark lists every dark-prefixed family; typing blue pulls together all the blues across the list.

Three-character shorthand is expanded automatically, so #f80 is treated as #ff8800. Input is case-insensitive, and hex letters can be upper or lower case.

How the Match Is Scored

Every named color is stored as an RGB triple. For a candidate color, the tool computes:

distance = sqrt( (3*ΔR)^2 + (4*ΔG)^2 + (2*ΔB)^2 )

where ΔR, ΔG, and ΔB are the channel differences between your input and the candidate. The weights are applied before squaring, so green contributes sixteen times as much per unit as blue and roughly 1.8 times as much as red. The candidate with the lowest distance is returned, along with that distance rounded to two decimals.

This is a fast, dependency-free approximation. It is not a perceptual color-difference standard such as CIEDE2000 or even the older CIE76 delta-E; it simply biases the search toward green, where the eye is most sensitive, and away from blue, where it is least sensitive.

Worked Examples

Input	Expanded	Closest name	That name’s hex	Distance
#f80	#ff8800	darkorange	#ff8c00	16
#663399	#663399	rebeccapurple	#663399	0
#00ffff	#00ffff	aqua	#00ffff	0
#f5f5f5	#f5f5f5	whitesmoke	#f5f5f5	0
tomato	#ff6347	tomato	#ff6347	0

The first row shows why the weighting matters. #ff8800 is close to plain orange (#ffa500), but darkorange is numerically nearer: the blue and red channels are identical, and only the green channel differs by 4. Scaling that by 4 gives a distance of 16.

Where Named Colors Break Down

• Duplicates share a hex value. Aqua/cyan, fuchsia/magenta, and gray/grey are interchangeable to the browser. The tool returns the first in its internal order, so the answer is deterministic but arbitrary between synonyms.
• Grays are crowded. Dozens of near-gray names sit close together, so a mid-gray input can land on gainsboro, lightgray, silver, or darkgray depending on tiny channel differences. The score is more informative than the name here.
• RGB distance is not perception. Two colors can have a small RGB distance and still read differently once lightness enters the picture, because RGB has no separate lightness term.
• The match is advisory. The tool always returns a name, even for a color that has no good name, so check the distance before trusting the label.

Reading the HSL Output

Alongside hex and RGB, each result shows HSL: a hue from 0 to 360 degrees, and saturation and lightness as percentages. HSL is often easier to reason about than RGB because the three axes map to separate intuitions. Hue is the colour family, saturation is how vivid it is, and lightness is how close it sits to black or white.

Two results from the examples above make this concrete:

Color	Hex	HSL
rebeccapurple	#663399	hsl(270, 50%, 40%)
darkorange	#ff8c00	hsl(33, 100%, 50%)

Rebeccapurple reads as a mid-lightness, half-saturated purple, which matches 270°, 50%, 40%. Darkorange is fully saturated and exactly halfway between black and white, giving 100% and 50%. When you want to lighten or darken a matched colour, adjusting the lightness percentage is far more predictable than editing individual RGB channels, which is why the tool shows HSL even though the distance calculation itself runs in RGB.

A Note on Where the Names Come From

The named colours are not arbitrary. The original 16 date from early HTML and the basic VGA palette; the larger set arrived with SVG and X11 and was folded into CSS. That history explains some oddities: aqua and cyan are both defined because two communities used different words for the same value, and the spelling pairs gray/grey persist to keep both American and British users happy.

One name is deliberately personal. rebeccapurple was added in CSS Color Level 4 in 2014, replacing an informal beccapurple proposal, in memory of Rebecca Meyer. It is a normal part of the CSS specification, so every modern browser accepts it alongside the older names.

Practical Tips

• For a small, hand-written palette, named colors make CSS more readable than hex; for a brand palette, keep the hex and use the name only as a comment.
• Round-trip an exact name to confirm the hex the browser will use, since several names are aliases.
• Named colors do not carry contrast guarantees. Pair any result with a contrast checker before using it for text.
• When you need the closest perceptual match rather than the closest RGB match, convert to HSL first and compare lightness and hue by hand, or reach for a dedicated palette tool.

Related Tools

• Color Picker
• Color Palette Generator
• Color Contrast Checker
• CSS Gradient Generator