This is a searchable reference of every CSS named color keyword — the roughly 148 keywords shared between CSS and SVG — each shown with its hex and RGB value on a live swatch. It is the quick way to go from a color name a design uses to the exact value you need to paste into code, or to browse the palette and find a name for a color you like.
How it works
The complete CSS Color Module Level 4 keyword list ships with the page as a name-to-hex table. As you type, the tool filters the list by matching your text against both the color names and their hex values, so you can search either way. Each result shows the swatch, the hex code and the equivalent rgb() value, ready to copy. Some keywords are aliases that render identically — for example aqua and cyan are both #00ffff.
Search examples
Searching coral shows:
| Name | Hex | RGB |
|---|---|---|
| coral | #ff7f50 | rgb(255, 127, 80) |
| lightcoral | #f08080 | rgb(240, 128, 128) |
Searching the hex #00ffff instead surfaces both aqua and cyan, since they share that value.
Searching blue returns the full blue family: blue, aliceblue, royalblue, steelblue, cornflowerblue, dodgerblue, deepskyblue, skyblue, lightblue, powderblue, cadetblue, mediumblue, navy, midnightblue, slateblue, mediumslateblue, darkslateblue, and more.
Why named colors exist and when to use them
CSS named colors were originally inherited from HTML and from the X11 color set used in Unix graphical interfaces. They are part of every CSS specification and are fully supported across all browsers.
When named colors are a good choice:
- Rapid prototyping, where typing
tomatoorsteelblueis faster than looking up a hex code. - Small projects without a design system, where the names are readable and self-documenting in the code.
- SVG files, where named colors are the traditional default and short names keep files compact.
- Quick scripts and data visualizations where a set of distinct, readable color names is enough.
When to prefer hex or HSL:
- Production design systems, where exact brand color values matter and named colors rarely align with brand palettes.
- Accessibility-reviewed UIs, where you need to verify specific contrast ratios against fixed values.
- Dynamic color generation (tints, shades, theming), which is much easier to compute from HSL than from named keywords.
Named colors are case-insensitive in CSS, so AliceBlue, aliceblue, and ALICEBLUE all produce the same result. The keywords are part of the global CSS specification, meaning they work in HTML, CSS, SVG, and Canvas the same way.
The color families at a glance
A few notable families to explore in the list:
- Blue family: over 15 keywords including
navy,midnightblue,royalblue,cornflowerblue,steelblue,deepskyblue, andaliceblue— spanning from near-black to near-white. - Green family:
darkgreen,seagreen,mediumseagreen,limegreen,chartreuse,olive,olivedrab,springgreen— covering forest through neon. - Pink and red family:
red,crimson,firebrick,tomato,coral,salmon,hotpink,deeppink,palevioletred,lightpink. - Gray family: many grays with subtle hue differences (
slategrayhas a blue tint,darkkhakihas a yellow-green tint,dimgrayis a warm gray).
Browsing by hex is particularly useful when you have a value from a design file and want to confirm whether it aligns with any named keyword, which can make the code more readable.
Everything runs in your browser; nothing is uploaded.