Super Boring Tools

Search tools

Find a tool by name or what it does.

Color Name Finder

Enter any color and get the nearest CSS named color, with swatches to compare and the next closest names.

HEX, RGB, HSL, or a CSS color name. Everything runs in your browser. Nothing is uploaded.

Nearest named color
Your color #6366f1mediumslateblue #7b68ee
mediumslateblue95.0% match
Matching
Also close
royalblue
#4169e192.4% match
slateblue
#6a5acd91.7% match
mediumpurple
#9370db88.8% match
cornflowerblue
#6495ed87.7% match
steelblue
#4682b484.0% match
blueviolet
#8a2be282.3% match

How to find a color name from a HEX or RGB value

  1. Enter a color

    Type or paste a HEX, RGB, or HSL value, or use the picker to choose one visually.

  2. Read the nearest name

    The closest CSS named color appears instantly with side by side swatches and a match percentage.

  3. Choose a matching mode

    Switch between perceptual weighting and plain RGB distance to change how closeness is measured.

  4. Copy the name

    Copy the best match with the main button, or copy any of the runner up names from the list.

Why use this tool

Every CSS named color

Matches against the complete CSS keyword table, with spelling aliases like gray and grey shown together.

Perceptual or plain RGB matching

The default mode weights red, green, and blue the way eyes perceive them; a plain RGB mode measures raw channel distance.

Side by side swatches

Your color and the matched name render next to each other so you can judge the difference visually, not just by number.

Exact matches labelled

When your value is exactly a named color, the result says so instead of showing a percentage.

Six runner up names

The next closest names are listed with swatches, hex values, and one click copy for each.

Runs entirely in your browser

Everything happens on your device; nothing is uploaded and no account is needed.

About this tool

CSS defines 148 color keywords, from common ones like red and navy to obscure entries like papayawhip and lightgoldenrodyellow. This tool takes any HEX, RGB, or HSL value and tells you which of those named colors is closest to it. The best match is shown with side by side swatches, its hex value, and a match percentage, and the six next nearest names are listed below it with their own swatches so you can pick a neighbour if the top result is not quite right.

Closeness is measured in one of two ways. The default perceptual mode weights the red, green, and blue channels according to how sensitive human vision is to each, which usually picks the name that actually looks closest. The plain RGB mode measures straight geometric distance between channel values, which is what many older tools and libraries use. If your input is exactly a named color, the result is labelled as an exact match, and spelling aliases such as gray and grey or aqua and cyan are shown together. Transparency in an input is ignored for matching.

Named colors are useful for readable stylesheets, quick prototypes, email HTML where custom values are risky, and simply describing a color in words. To translate the same value between formats instead, try the HSL to RGB converter or the HEX to OKLCH converter, and use the color wheel to explore hues around it.

Frequently asked questions

How does the color name finder work?
It parses your HEX, RGB, or HSL value, measures the distance from it to every CSS named color, and returns the closest one along with the six next nearest names. Results update instantly as you type.
What is the difference between the two matching modes?
Perceptual mode weights the red, green, and blue channels based on how strongly human vision responds to each, so the winner tends to look closest. Plain RGB mode treats the three channels equally and measures raw geometric distance.
Which input formats are supported?
HEX in 3, 4, 6, or 8 digit form, rgb() and rgba(), hsl() and hsla(), and existing CSS color names. Any transparency in the value is ignored for matching, and the result notes when that happens.
Why do some results show two names?
Nine CSS keywords are spelling aliases that share the same color, such as gray and grey or fuchsia and magenta. The tool stores each color once and shows both spellings together.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.
What does the match percentage mean?
It is the measured distance between your color and the named color, rescaled so identical colors read 100% and the most distant possible pair reads 0%. An exact match is labelled as exact instead of showing 100%.

Related tools