Browse All CSS Named Colors with HEX Codes Browse all 140+ CSS named colors with search, sort by hue or lightness.

🎨

CSS Named Colors Reference

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

Search Colors

Filter colors by typing a name fragment.

Select a Sort Option

Sort by alphabetical name, hue angle, or lightness.

Copy HEX

Copy any color's HEX code.

Loading tool...

What Is CSS Named Colors Reference?

The CSS Named Colors Reference is a complete visual catalog of all 140+ CSS named colors defined in the W3C specification. Unlike a simple lookup tool, this reference offers multiple sorting options — alphabetical, by hue (grouping similar colors together), and by lightness (from lightest to darkest) — making it a powerful tool for color exploration and discovery. Each color entry shows a visual swatch, the semantic name, and the HEX code. The search function filters by partial name matches, so typing "blue" shows all blue-related colors (aliceblue, blue, cadetblue, cornflowerblue, etc.). This reference is essential for developers who want to quickly find colors by name, explore what CSS color names are available, or choose semantically meaningful color names for prototyping.

Why Use CSS Named Colors Reference?

Complete catalog of all 140+ CSS named colors
Three sorting options: name, hue, and lightness
Search filtering by partial name match
Visual swatches for instant color comparison
One-click copy for every HEX code

Common Use Cases

Color Discovery

Browse named colors sorted by hue to discover new colors you did not know existed in CSS.

Quick Reference

Find the exact HEX value for any CSS named color.

Prototyping

Choose semantic color names for rapid prototyping without looking up hex codes.

Education

Learn the full range of CSS named colors and their visual appearance.

Technical Guide

CSS named colors are keywords defined in the CSS Color Module Level 4 specification. There are 148 named colors (including aliases like aqua/cyan). Each name maps to a specific sRGB color. The hue sorting uses the HSL hue angle (0-360°) extracted from each color's hex value, which groups reds, oranges, yellows, greens, blues, and purples together. Lightness sorting uses the HSL lightness value (0-100%). Achromatic colors (black, white, grays) have a hue of 0° but very low saturation, so they cluster at one end of the hue sort. Some naming inconsistencies exist from the X11 color system heritage — notably, "darkgray" (A9A9A9) is lighter than "gray" (808080).

Tips & Best Practices

1
Sort by hue to find all blues, all greens, all reds, etc. grouped together
2
Sort by lightness to quickly find light colors for backgrounds or dark colors for text
3
The search accepts partial matches — "sea" finds seagreen, seashell, darkseagreen, etc.
4
Named colors are great for console.log styling, SVG fills, and quick prototypes
5
For production, replace named colors with exact HEX values for predictability

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 Name to HEX

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

🎨 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

Frequently Asked Questions

Q How many CSS named colors are there?

148 named colors in the CSS specification, with 145 unique colors (3 are aliases: aqua=cyan, fuchsia=magenta, darkgrey=darkgray).

Q What does sorting by hue mean?

Hue sorting arranges colors by their position on the color wheel (0-360°). Reds come first (0°), then oranges, yellows, greens, blues, purples, and back to reds. Grays have undefined hue and appear at one end.

Q Can I use named colors in modern CSS?

Yes, named colors work in all CSS properties that accept color values. They are defined in the CSS standard and supported universally.

About This Tool

CSS Named Colors Reference 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.