CSS Color Name to HEX Converter Look up HEX codes for all 140+ CSS named colors with search and preview.

🎨

Color Name to HEX

Look up HEX codes for all 140+ CSS named colors with search and preview.

Search by Name

Type a color name like "coral" or "blue" to filter the list.

Browse Colors

Scroll through all 140+ CSS named colors with visual swatches.

Copy HEX Code

Click Copy to grab the HEX code for any named color.

Loading tool...

What Is Color Name to HEX?

The CSS color name to HEX lookup provides instant access to all 140+ colors defined in the CSS specification by their human-readable names. Instead of memorizing hex codes, CSS allows you to use names like "coral," "tomato," "steelblue," or "rebeccapurple" directly in your stylesheets. This tool displays every named color with its visual swatch, the exact HEX code, and one-click copy functionality. It is an invaluable reference for developers who want to use semantic color names in prototypes, find the hex value of a color they know by name, or discover new colors they did not know existed in the CSS specification. The searchable interface makes it fast to find specific colors or browse entire color families. Named CSS colors range from basic primaries to nuanced shades like "lemonchiffon," "papayawhip," and "mintcream."

Why Use Color Name to HEX?

Complete reference for all 140+ CSS named colors
Visual swatches make it easy to compare colors at a glance
Instant search filtering to find colors by partial name
One-click copy for each color HEX code
Useful for quick prototyping and learning CSS color names

Common Use Cases

Quick Prototyping

Use named colors for fast prototyping without looking up hex codes.

CSS Reference

Find the exact HEX value for CSS named colors to ensure cross-browser consistency.

Learning Aid

Explore the full range of CSS named colors and their hex equivalents.

Code Reviews

Verify that named colors in code match the intended visual appearance.

Technical Guide

CSS named colors are a predefined set of 148 color keywords (including duplicates like "aqua"/"cyan" and "fuchsia"/"magenta") specified in the CSS Color Module Level 4. Each name maps to a specific sRGB color defined as a HEX triplet. These names originated from the X11 color set used in Unix windowing systems, with additions over time. The name "rebeccapurple" (#663399) was added in 2014 as a tribute to Eric Meyer's daughter. Named colors are case-insensitive in CSS: "DarkSlateGray" and "darkslategray" are identical. While convenient for development, named colors have limitations: they offer only 148 of the 16.7 million possible RGB colors, and the names can be subjective (e.g., "gray" is #808080 while "darkgray" is #A9A9A9, which is lighter than "gray"). For production code, most teams prefer HEX or HSL for precise color control and consistency with design specifications.

Tips & Best Practices

1
CSS named colors are case-insensitive — "DarkBlue" and "darkblue" are identical
2
Counterintuitively, "darkgray" (#A9A9A9) is lighter than "gray" (#808080)
3
Named colors are great for prototyping but typically replaced with exact HEX values in production
4
The keyword "transparent" is also a valid CSS color equivalent to rgba(0,0,0,0)
5
rebeccapurple (#663399) was the most recently added named color, honoring Rebecca Meyer

Related Tools

HEX to RGB Converter

Convert HEX color codes to RGB values instantly with a live preview swatch.

🎨 Color Tools

HEX to HSL Converter

Convert HEX color codes to HSL (Hue, Saturation, Lightness) values.

🎨 Color Tools

Color Picker

Interactive color picker with HEX, RGB, HSL, and CMYK outputs.

🎨 Color Tools

Tailwind Color Finder

Find the closest Tailwind CSS color class for any HEX code.

🎨 Color Tools

CSS Named Colors Reference

Browse all 140+ CSS named colors with search, sort by hue or lightness.

🎨 Color Tools

Frequently Asked Questions

Q How many CSS named colors are there?

There are 148 named colors in the CSS specification, including a few duplicate pairs (aqua/cyan, fuchsia/magenta). This gives 145 unique colors.

Q Are named colors supported in all browsers?

Yes, all modern browsers support all CSS named colors. They have been part of the CSS specification since CSS1 (basic colors) and CSS3 (extended colors).

Q Can I use named colors in JavaScript?

Yes, you can use named colors in Canvas, CSS-in-JS libraries, and any CSS property set via JavaScript. For example: element.style.color = "tomato".

Q Why is darkgray lighter than gray?

This is a historical quirk from the X11 color naming system. "gray" is #808080 (medium gray) while "darkgray" is #A9A9A9 (a lighter shade). The naming was inconsistent in the original specification.

About This Tool

Color Name to HEX is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.