# 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. > Canonical page: https://elysiatools.com/en/tools/css-color-name-resolver - **Category:** Design - **Keywords:** css color name, name that color, delta e calculator, ciede2000, nearest color, color family list ## Overview 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. ## Inputs - **Color (hex or CSS name)** (text): #3366ff or cornflowerblue - **Distance metric** (select) - **Result mode** (select) - **Number of matches** (number) ## When to use - When you need to find an official CSS named color that closely approximates an arbitrary hex code. - When evaluating color difference accuracy between two shades using perceptual ΔE metrics. - When exploring all available CSS keywords within a specific designer color family such as browns, teals, or violets. ## How it works - Enter a hex code (e.g., #3366ff) or an existing CSS color name into the input field. - Select your preferred distance metric, such as CIEDE2000, CIE94, CIE76, or legacy RGB distance. - Choose whether to view ranked nearest matches or browse the input's entire color family group. - Inspect the calculated ΔE distance values and matched CSS color keyword details. ## Use cases - Selecting human-readable CSS color names for design token naming and stylesheet variables. - Checking perceptual color closeness when replacing custom hex values with native CSS keyword fallbacks. - Auditing brand color palettes against standardized web color families for documentation. ## Frequently asked questions ### 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. ## Related tools - [CMYK Color Converter](https://elysiatools.com/en/tools/cmyk-converter): Convert HEX, RGB, HSL, and CMYK colors into all four representations. - [Color Sepia Toner](https://elysiatools.com/en/tools/color-sepia-toner): Apply sepia toning effects to colors with classic, warm, cool, and custom sepia styles - [Color Space Converter](https://elysiatools.com/en/tools/color-space-converter): Convert a color between HEX, RGB, HSL, CIELAB, and Display-P3 with CSS-ready output and gamut checks. - [Color Split Complement](https://elysiatools.com/en/tools/color-split-complement): Generate split complementary color schemes with harmonious contrast using base color and two adjacent colors to complement - [OKLCH Color Converter](https://elysiatools.com/en/tools/oklch-color-converter): Convert bidirectionally between HEX, RGB, HSL, OKLCH and Display-P3 using CSS Color 4 math, with gamut checks and out-of-gamut clipping suggestions - [Adobe RGB to CMYK Converter](https://elysiatools.com/en/tools/adobe-rgb-to-cmyk-converter): Convert Adobe RGB color values to CMYK format for printing with alpha channel support - [Adobe RGB to HEX Converter](https://elysiatools.com/en/tools/adobe-rgb-to-hex-converter): Convert Adobe RGB color values to HEX format for web design - [Adobe RGB to HSL Converter](https://elysiatools.com/en/tools/adobe-rgb-to-hsl-converter): Convert Adobe RGB color values to HSL format for design work ## Samples - [Color Code Samples](https://elysiatools.com/en/samples/color-code): Collection of color codes in various formats (Hex, RGB, HSL, named colors) for validation testing - [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion - [Bulma CSS Framework Samples](https://elysiatools.com/en/samples/bulma): Bulma CSS framework examples including columns, components, form controls, layout system, and modern CSS-based design patterns - [CSS Selector Samples](https://elysiatools.com/en/samples/css-selectors): Collection of CSS selector examples for extraction and analysis testing ## Related content - [Color Space Conversion Tools for Web and Print](https://elysiatools.com/en/hubs/design-convert): Curated tools for web-to-print color space conversion in one hub. - [CSS Effects, Palettes, and Design Token Generators](https://elysiatools.com/en/hubs/design-generate): Curated tools for CSS visual effects, palette building, and design token generation in one hub. - [Web Accessibility Audit and Accessible Color Tools](https://elysiatools.com/en/hubs/web-accessibility-audits): Review WCAG issues, screen-reader order, contrast failures, color-vision risk, and accessible palette choices in one hub for website and UI accessibility workflows. - [Color Design & Color Space Conversion Tools](https://elysiatools.com/en/hubs/color-design-tools): Compare color converters, palette generators, harmony tools, accessibility checkers, and color adjustment utilities in one hub for designers and developers.