🎨 CSS Named Colors Chart
By ToolNimba Design Team · Updated 2026-06-19
Showing all CSS named colors. Click any swatch to copy its hex code.
This CSS named colors chart shows every standard color keyword you can write directly in CSS or HTML, like coral, tomato, dodgerblue and rebeccapurple, each with a live swatch and its exact hex code. Type a name or a hex value in the search box to filter the list, sort by name, hue or lightness, then click any chip to copy the hex to your clipboard. It is the fast way to remember what a keyword actually looks like, or to find the closest hex when you only know the name.
What is the CSS Named Colors Chart?
A CSS named color is a predefined keyword that the browser maps to a fixed sRGB color. Instead of writing color: #ff7f50, you can write color: coral and get the same result. The full set is defined in the CSS Color Module and is recognised everywhere CSS is used: stylesheets, inline style attributes, SVG and the HTML style property. The names are case insensitive, so Coral, coral and CORAL all resolve to the same value.
There are 148 distinct keywords in the standard list, but they describe 139 unique colors because seven of them are British and American spelling pairs that point to the same value: gray and grey, plus darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, slategray/slategrey, darkslategray/darkslategrey, lightslategray/lightslategrey. A few names are also exact synonyms for the same hex, such as aqua and cyan (both #00FFFF) and fuchsia and magenta (both #FF00FF), which exist because the colors arrived from different historical sources (the original HTML set and the X11 color list).
Named colors are handy for quick prototyping, demos and teaching because they are readable and easy to remember, but for production design most teams pin down an exact palette in hex, RGB or HSL rather than relying on keywords. The one named color added in modern CSS is rebeccapurple (#663399), included in memory of Eric Meyer's daughter Rebecca. Every keyword here is part of the official specification, so it will render identically across all current browsers.
When to use it
- Recalling what a color keyword like sienna, teal or thistle actually looks like before using it.
- Finding the exact hex code behind a CSS color name to paste into a design tool or variable.
- Searching by a hex value to see whether a standard keyword matches a color you already have.
- Teaching or learning CSS colors with a visual reference that groups names by hue or lightness.
How to use the CSS Named Colors Chart
- Browse the grid of swatches, each labelled with its CSS color name and hex code.
- Type a name (like coral) or a hex value (like ff7f50) in the search box to filter the list.
- Use the Sort menu to order by name, by hue around the color wheel, or by lightness.
- Click any swatch to copy its hex code to your clipboard, ready to paste into your CSS.
Formula & method
Worked examples
You want the hex code behind the keyword tomato to reuse it as a CSS variable.
- Search for "tomato" to filter the chart down to a single swatch.
- Read the hex shown on the chip: #FF6347.
- Split it into channels: FF = 255 red, 63 = 99 green, 47 = 71 blue.
- Click the swatch to copy #FF6347, then paste it as --accent: #ff6347.
Result: tomato resolves to #FF6347, equivalent to rgb(255, 99, 71).
You have the hex #4169E1 and want to know if a CSS keyword matches it.
- Type "4169e1" (or "#4169E1") into the search box.
- The chart filters to the matching swatch: royalblue.
- Confirm the channels: 41 = 65 red, 69 = 105 green, E1 = 225 blue.
- You can now write color: royalblue instead of the raw hex.
Result: #4169E1 is the named color royalblue.
Popular CSS named colors and their hex codes
| Name | Hex | RGB |
|---|---|---|
| red | #FF0000 | 255, 0, 0 |
| coral | #FF7F50 | 255, 127, 80 |
| tomato | #FF6347 | 255, 99, 71 |
| gold | #FFD700 | 255, 215, 0 |
| teal | #008080 | 0, 128, 128 |
| dodgerblue | #1E90FF | 30, 144, 255 |
| royalblue | #4169E1 | 65, 105, 225 |
| rebeccapurple | #663399 | 102, 51, 153 |
Named colors that share a single hex value (synonyms and spelling pairs)
| Names | Hex | Why |
|---|---|---|
| aqua, cyan | #00FFFF | Synonyms from the original HTML and X11 color sets |
| fuchsia, magenta | #FF00FF | Synonyms from the original HTML and X11 color sets |
| gray, grey | #808080 | American and British spelling of the same color |
| darkgray, darkgrey | #A9A9A9 | American and British spelling |
| lightgray, lightgrey | #D3D3D3 | American and British spelling |
| slategray, slategrey | #708090 | American and British spelling |
Common mistakes to avoid
- Assuming the names line up with intuition. Some keywords are surprising: green is #008000 (a fairly dark green), while the brighter pure green is lime (#00FF00). Likewise gray (#808080) is mid grey, not light. Always check the swatch rather than guessing from the word.
- Mixing up gray and grey spellings. Both spellings are valid and identical, but if you define a custom CSS variable or class around one spelling, referencing the other will not find it. Pick one spelling and stay consistent in your own code.
- Expecting an exact named color for any hex. There are only 139 unique named colors, so most hex values have no keyword. A search by hex finds a match only when it is exactly one of the standard values, not the nearest one.
- Using keywords for a precise brand palette. Named colors are great for prototypes and teaching, but a brand or design system should pin exact hex, RGB or HSL values. Relying on keywords makes fine adjustments harder and limits you to the fixed set.
Glossary
- Named color
- A predefined CSS keyword (like coral) that maps to a fixed sRGB color you can use anywhere a color value is allowed.
- Hex code
- A six digit color value such as #FF7F50, encoding red, green and blue channels as two hexadecimal digits each.
- sRGB
- The standard red green blue color space used on the web, which the named color keywords are defined against.
- Hue
- The position of a color around the color wheel, from 0 to 360 degrees, used here as one of the sort options.
- Lightness
- How light or dark a color is in the HSL model, from 0 (black) to 1 (white), used as another sort option.
Frequently asked questions
How many CSS named colors are there?
There are 148 named color keywords in the standard CSS list, but they represent 139 unique colors. The difference comes from spelling pairs (gray and grey and their dark, light and slate variants) plus a few exact synonyms like aqua and cyan that share the same hex value.
Can I use a color name directly in CSS?
Yes. You can write color: coral or background: dodgerblue anywhere a color value is allowed, including inline style attributes and SVG. The names are case insensitive, so coral and Coral work the same. Every keyword in this chart is part of the official CSS specification.
What is the difference between green and lime?
In CSS, green is #008000, a medium to dark green, while lime is #00FF00, the bright pure green. This trips people up because the word green suggests the brighter shade. When you want the vivid one, use lime; the chart swatches make the difference obvious.
Why do gray and grey both exist?
CSS accepts both the American spelling gray and the British spelling grey, and they map to the identical color #808080. The same applies to darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, slategray/slategrey and their slate variants. Use whichever spelling you prefer, just stay consistent.
Can I find a named color from a hex code?
Yes. Type the hex value into the search box, with or without the leading hash, and the chart filters to any keyword that matches it exactly. Note this only finds an exact standard value, so most arbitrary hex codes will not map to a named color.
What is rebeccapurple?
rebeccapurple (#663399) is a CSS named color added to the specification in memory of Rebecca Meyer, the daughter of web standards advocate Eric Meyer. It is the most recent addition to the named color set and is supported in all current browsers.