Modern web browsers support 148 named colors in CSS. These range from familiar terms like black and blue to oddly specific descriptors like papayawhip, peachpuff, and darkolivegreen. While most production stylesheets rely on HEX or HSL codes, CSS color names remain useful for rapid prototyping, learning projects, and documentation — no sign-up, no account needed to search them.
However, translating an exact HEX value into the closest CSS keyword is not obvious. If your brand palette uses #1E3A8A, what is the nearest CSS named color? A color name finder solves this by computing the mathematical distance between your custom color and all 148 standard keywords.
Find Named CSS Colors
Color Name Finder
Enter a HEX code and instantly find the closest CSS color name.
How to Use the Color Name Finder
Step 1: Enter a HEX Code
Paste any 6-digit HEX color into the search field (e.g., #1E3A8A).
Step 2: View the Closest Match
The tool instantly returns the nearest CSS named color with its exact HEX value and a visual swatch showing both your input and the match side by side.
Step 3: Check the Distance Score
A lower distance score means a closer match. A score of 0 means your color is an exact match to a CSS keyword.
Step 4: Copy the Name
Click the color name or HEX value to copy it to your clipboard for use in your stylesheet.
How Named Colors Are Matched: Euclidean Distance
When you enter a custom HEX value, the tool searches all 148 named colors to find the closest match. It does this by treating each color as a coordinate in a three-dimensional space.
Every color has three components: Red ($R$), Green ($G$), and Blue ($B$), each between 0 and 255. This creates a 3D grid where:
- The X-axis represents Red.
- The Y-axis represents Green.
- The Z-axis represents Blue.
The mathematical "closeness" between your input color ($C_1$) and any named color ($C_2$) is calculated using the 3D Euclidean distance formula:
$$d = \sqrt{(R_1 - R_2)^2 + (G_1 - G_2)^2 + (B_1 - B_2)^2}$$
The named color with the smallest $d$ value is the closest CSS keyword. The maximum possible distance is approximately 441 (between pure black #000000 and pure white #FFFFFF).
The History Behind CSS Named Colors
The standard list of CSS named colors does not come from W3C committees or design committees — it originates from the X11 window system, a graphical framework developed for Unix workstations in the mid-1980s. A small team compiled a text file mapping English color words to RGB values, which early web browsers adopted and the W3C eventually standardized.
This unusual history explains several quirks that still exist today.
Why darkgray Is Lighter Than gray
This is one of the most well-known oddities in CSS:
graymaps to#808080— exactly 50% brightness.darkgraymaps to#A9A9A9— approximately 66% brightness.
darkgray is objectively lighter than gray. This discrepancy comes from conflicting specifications in the original X11 tables, and W3C kept the incorrect mapping to avoid breaking legacy web pages that relied on the original behavior.
The Story of RebeccaPurple
One of the most meaningful additions to the CSS color list is rebeccapurple (#663399). In June 2014, Eric Meyer — a prominent CSS author and web standards contributor — lost his six-year-old daughter Rebecca to brain cancer. Purple was her favorite color. The web standards community proposed adding the color to the official CSS specification as a tribute. The W3C adopted it unanimously in CSS Color Module Level 4. It is one of the only colors named after a real person.
When to Use Named Colors vs. HEX Codes
| Scenario | Named Colors | HEX Codes |
|---|---|---|
| Rapid Prototyping | Excellent — fast to type, memorable | Slow — requires copy-pasting |
| Brand Accuracy | Poor — only 148 fixed colors | Excellent — 16.7 million options |
| Code Readability | Excellent — self-documenting | Requires comments to explain meaning |
| System Standardization | Poor — no logical scale relationship | Excellent — integrates with theme tokens |
| Accessibility Testing | Limited — colors preselected | Better — test any combination |
Complete List of Commonly Used CSS Named Colors
Here are some of the most frequently used CSS named colors across the spectrum:
| Color Name | HEX Value | Category |
|---|---|---|
tomato |
#FF6347 |
Red |
crimson |
#DC143C |
Red |
orangered |
#FF4500 |
Orange-Red |
coral |
#FF7F50 |
Salmon |
gold |
#FFD700 |
Yellow |
forestgreen |
#228B22 |
Green |
teal |
#008080 |
Blue-Green |
royalblue |
#4169E1 |
Blue |
indigo |
#4B0082 |
Indigo |
rebeccapurple |
#663399 |
Purple |
hotpink |
#FF69B4 |
Pink |
dimgray |
#696969 |
Gray |
gainsboro |
#DCDCDC |
Light Gray |
Privacy Note
Finding color names involves entering HEX codes that may represent brand colors or design system tokens. FluxToolkit performs all nearest-neighbor calculations locally using client-side JavaScript. No color inputs, search entries, or results are sent to our servers. Your selections remain private on your device.
Frequently Asked Questions
How many standard CSS color names exist?
There are 148 standard CSS color names supported by all modern browsers. This count includes duplicates for gray variants: darkgray and darkgrey map to the same HEX value, as do gray and grey.
What is the closest named color to pure gray?
gray maps to #808080 (50% brightness). Close relatives are dimgray (#696969, darker) and lightgray (#D3D3D3, lighter).
Why is darkgray lighter than gray in CSS?
This is a legacy bug inherited from the original X11 color table. W3C preserved the incorrect mapping to avoid breaking older web pages that relied on it.
Does rebeccapurple work in older browsers?
Yes. rebeccapurple has been in the CSS specification since 2014 and is fully supported across all modern browsers including Chrome, Firefox, Safari, and Edge.
How accurate is the nearest-color match?
The Euclidean distance method works well for finding approximate CSS name equivalents but does not account for perceptual color differences. Two colors can be mathematically close in RGB space while looking quite different to the human eye. For perceptual accuracy, matching in LAB or OKLCH space would be more reliable.
Is my color search history saved?
No. All matching logic runs in your browser tab. Your search history is never sent to any server.
Find Named Colors Free — No Sign-Up Required
Enter any HEX value and instantly find its closest CSS color keyword. Free, private, no account needed.
Related Articles
- CSS Color Converter: HEX, RGB, HSL & OKLCH Guide — Convert between all color formats.
- Color Contrast Checker: Accessibility Audits — Test if your named colors meet WCAG contrast thresholds.
- Color Palette Generator: Build Harmonious UI Schemes — Design full palettes from scratch.