Color Name Finder

Find the nearest CSS/HTML color name for any hex color.

Input

Output

Examples

Example 1

#FF5733

Example 2

#3498DB

Example 3

#2ECC71

Understanding CSS Named Colors

CSS defines 147 named colors that can be used instead of hexadecimal or RGB values. These include basic colors like 'red' and 'blue', descriptive names like 'cornflowerblue' and 'palevioletred', and system colors. Named colors improve code readability and are easier to remember than hex codes.

Named colors date back to early web development when color displays were limited. While modern development typically uses hex or RGB for precision, named colors remain valuable for quick prototyping, teaching, and situations where semantic naming improves code maintainability.

Not all named colors are created equal in terms of accessibility or visual appeal. Some like 'darkgray' (#A9A9A9) are actually lighter than 'gray' (#808080), which can be confusing. Understanding these quirks helps you choose appropriate colors for your designs.

How Color Matching Algorithm Works

This tool calculates the Euclidean distance in RGB color space between your input color and all 147 CSS named colors. The formula is: distance = √[(R₁-R₂)² + (G₁-G₂)² + (B₁-B₂)²]. The named color with the smallest distance is the closest match.

The matching is purely mathematical and doesn't account for human color perception. Colors that appear similar to the human eye might have larger RGB distances than colors that look quite different. For perceptually accurate matching, Lab or LCH color spaces would be superior.

The algorithm finds the single nearest match, but sometimes multiple named colors are very close. For example, #F0F8FF could match both 'aliceblue' and 'azure' with similar distances. The tool returns only the closest one.

When to Use Named Colors vs Hex Codes

Use named colors for rapid prototyping and learning. They're faster to type and understand, making them ideal for quick mockups, coding tutorials, and educational content where precision isn't critical.

Prefer hex or RGB in production code for brand-specific colors. Your brand's exact blue (#1E3A8A) likely doesn't match any named color perfectly. Using 'blue' would be semantically incorrect and visually inconsistent with your brand guidelines.

Named colors work well for CSS resets and default styles. Setting body text to 'black' or backgrounds to 'white' is clearer than #000000 and #FFFFFF, especially for developers who might customize these values later.

Avoid named colors for precise design work or when working with design tokens. Design systems require exact color values that can be shared between design tools (Figma, Sketch) and code—hex codes ensure perfect fidelity.

Interesting CSS Named Color Facts

Some named colors have unexpected values: 'darkgray' is lighter than 'gray', 'lightyellow' is extremely light (#FFFFE0), and 'rebeccapurple' (#663399) was added in CSS4 to honor web pioneer Eric Meyer's daughter Rebecca.

The X11 color names (inherited from Unix systems) include duplicates with and without spaces: 'darkblue' vs 'dark blue', 'lightgreen' vs 'light green'. CSS standardized the no-space versions but supports both for compatibility.

Named colors don't cover all hues equally. There are many blue variations (navy, blue, mediumblue, darkblue, midnightblue) but fewer greens and oranges. This historical bias reflects early display technology limitations.

For accessibility, named colors must still meet WCAG contrast requirements. 'Purple' text on 'navy' background fails contrast checks despite both being named colors. Always verify contrast ratios regardless of using named or hex colors.

Loading tool…