What is the difference between CIEDE2000 and legacy RGB distance?

CIEDE2000 accounts for human perceptual sensitivity to hue, chroma, and lightness, whereas Euclidean RGB distance misjudges perceptual differences, especially in dark blues and near-neutrals.

How many CSS named colors are supported?

The resolver supports all 148 keywords from CSS Color Module Level 4, representing 139 distinct color values after merging aliases.

What does the ΔE (Delta E) value indicate?

A ΔE below 1 is imperceptible to human eyes, 1 to 2 is barely perceptible, 2 to 10 is clearly noticeable, and 50 or above indicates opposite colors.

What does Color Family mode do?

Color Family mode organizes the 139 distinct CSS colors into 12 designer families and lists all keywords in the target family sorted by distance.

Can I input a CSS color name instead of a hex code?

Yes, you can input valid CSS color names like cornflowerblue or sandybrown to inspect distances or browse their families.

Elysia Tools

Navigation

Design

CSS Color Name Resolver

Resolve any hex color to its nearest CSS named color with true CIEDE2000 ΔE distance, then browse the whole color family it belongs to.

Details

What this tool helps you do

Built on the complete CSS Color Module Level 4 keyword list (148 keywords, 139 distinct colors, gray/grey + aqua/cyan + fuchsia/magenta aliases folded together). Distance uses the CIEDE2000 formula (Sharma/Wu/Dalal 2005, including the 180° hue-wrap special cases) computed through sRGB → linear RGB → XYZ(D65) → CIELab; classic “name that color” sites use plain RGB distance, which misranks dark blues and near-neutrals — switch the metric to see the ranking change. The family view buckets all 139 colors into 12 designer families (white/gray/black/brown/red/orange/yellow/green/cyan-teal/blue/purple-violet/pink-magenta) via HSL thresholds, so “what browns exist in CSS” is one query. ΔE rule of thumb: <1 imperceptible, 1–2 barely perceptible, 2–10 obvious, ≥50 opposite.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Prepared example runs

Click an example to fill the form automatically. File inputs still need an upload.

2 examples

Sandy brown, exactly

Resolving #f4a460 lands on the exact named color sandybrown with ΔE 0 — plus the runner-up list showing how far the next candidates are.

<section class="cnr">exact match banner for sandybrown (#f4a460) · ranked list of 8 nearest colors with ΔE00 values and quality chips</section>

A brand violet, family mode

Resolving #8842d4 in family mode shows its purple-violet family ranked by ΔE00 — blueviolet at 3.68 is the closest legal CSS name for design tokens or Tailwind theming.

<section class="cnr">family browse card: purple-violet family of 16 named colors, each with ΔE00 distance from #8842d4</section>

Inputs

Set the required fields, then run the tool.

4 options

ContentPaste or type the main input values.1

Color (hex or CSS name)textRequired

SettingsAdjust formats, ranges, numbers, and modes.3

Distance metricselectOptionalResult modeselectOptionalNumber of matchesnumberOptional

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

CSS Color Name Resolver

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Resolving an Exact CSS Match

2. Finding Nearest Keyword for a Brand Purple

FAQ

Color Code Samples

Web Image Processing Python Samples

Bulma CSS Framework Samples

CSS Selector Samples

CMYK Color Converter

Color Sepia Toner

Color Space Converter

Color Split Complement

Color Space Conversion Tools for Web and Print

CSS Effects, Palettes, and Design Token Generators

Web Accessibility Audit and Accessible Color Tools

Color Design & Color Space Conversion Tools