Color Name Finder

Why use Color Name Finder

• Picker mode and image-upload mode in the same tool, so a hex from a CSS file and a pixel from a screenshot both resolve to a named color without switching apps.
• Perceptual CIE Lab DeltaE matching means the suggested name reflects how the color actually looks, not how its RGB triplet happens to sit in a cube.
• Top five matches with their distance scores let you choose between adjacent names when the color sits on a boundary, instead of trusting a single nearest-neighbor pick.

How it works

The app parses your hex or RGB input and converts it to CIE Lab using the standard sRGB to XYZ to Lab pipeline with a D65 illuminant. Each named color in the bank is converted once and cached. To find the nearest name, the tool computes DeltaE76 (Euclidean distance in Lab space) between your input and every entry in the bank, then picks the smallest. For image uploads, the file is rendered into a canvas, downscaled to 320 pixels on the longer edge, and every visible pixel is bucketed into a coarse RGB histogram. The most populous bucket's centroid becomes the auto-picked color. Click events on the canvas resolve to a pixel index and read that pixel's RGB directly, so manual sampling stays accurate even on small previews.

About this tool

You spotted a color in a photo, a Figma file, or a CSS variable in the wild and you need a name for it. "#7B68EE" is a hex code; "Medium Slate Blue" is something you can put in a brief, a moodboard caption, or a Slack message without sending a swatch every time. This finder takes a hex value, an RGB color, or any pixel from an uploaded image and matches it to the closest entry from a curated bank of around 160 named colors covering the CSS3 standard plus common everyday shades like Burgundy, Sage, Periwinkle, and Cerulean. Matching uses CIE Lab DeltaE76 distance instead of plain RGB distance. RGB distance treats colors as points in a cube, but human eyes do not see brightness and hue uniformly across that cube. Lab distance flattens the perceptual differences so #FF8C00 lands on "Dark Orange" rather than something arbitrarily close in raw RGB space. The closeness label tells you whether the match is exact, very close, close, near, or approximate. Two input modes are wired up. Picker mode accepts a native color picker plus a hex field that validates as you type. Image mode lets you drop in a PNG, JPG, WebP, or GIF, auto-picks the dominant color, and lets you click any pixel on the preview to sample that exact color. The image is rendered to a canvas and never uploaded to a server, so your screenshot of a competitor's brand color stays on your machine. Output shows the input swatch and named-match swatch side by side, the hex value, the rgb triplet, the closeness rating, and the next four closest matches with their DeltaE distances. Copy buttons grab the name or the hex with one click. Designers, brand managers, web devs, and anyone naming a Notion page tag will find this faster than cross-referencing Wikipedia tables.

How to use Color Name Finder

1. Pick how you want to input the color. Use the Pick a color tab for a hex value or color picker. Use the From image tab to drop in a PNG, JPG, WebP, or GIF.
2. Set or sample your color. Type a hex value, drag the picker, or click anywhere on the uploaded image preview to sample that pixel.
3. Read the nearest name. The closest named color appears with a swatch, hex code, and a closeness rating from exact to approximate.
4. Browse the runner-up matches. Scan the four next-closest names with their DeltaE distances. Helpful when the color sits between two named regions.
5. Copy the name or hex. Use the Copy name button for the label, or Copy hex when you want the value. Both write to the system clipboard.

Use cases

• Naming the dominant color from a competitor's screenshot before describing it in a brand audit doc.
• Translating a Figma fill (#5C8C6B) into something a stakeholder will recognize in a Slack thread without a swatch attached.
• What is the name of that blue in the photo your client sent? Drop it in, click the spot, get "Steel Blue".
• A web developer needs a quick label for a CSS variable that currently reads --color-7b68ee, picking up Medium Slate Blue from the picker.
• Tagging Notion or Pinterest entries with consistent color labels across a moodboard so future searches surface the right swatches.
• Sanity-checking a designer's claim that a logo is "forest green" by sampling the actual logo file and comparing to the named match.