CSS Named Colors: The Complete Reference Guide

What Are CSS Named Colors?

CSS named colors are predefined color keywords that browsers recognize and render as specific RGB values. Instead of writing #FF0000 or rgb(255, 0, 0), you can simply write “red.” CSS defines 148 named colors, ranging from obvious choices like “blue” and “green” to more creative names like “papayawhip,” “lemonchiffon,” and “rebeccapurple.”

Named colors make CSS more readable and are useful for quick prototyping, learning, and cases where exact brand colors are not required. Every modern browser supports all 148 named colors identically.

Color Categories

Basic colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. These 16 colors were the original HTML color names and remain the most commonly used.

Reds and pinks: indianred, lightcoral, salmon, darksalmon, lightsalmon, crimson, firebrick, darkred, pink, lightpink, hotpink, deeppink, mediumvioletred, palevioletred.

Oranges and yellows: lightsalmon, coral, tomato, orangered, darkorange, orange, gold, lightyellow, lemonchiffon, papayawhip, moccasin, peachpuff, palegoldenrod, khaki, darkkhaki.

Greens: lawngreen, chartreuse, limegreen, lime, forestgreen, green, darkgreen, greenyellow, yellowgreen, springgreen, mediumspringgreen, lightgreen, palegreen, darkseagreen, mediumseagreen, seagreen, olive, darkolivegreen, olivedrab.

Blues: aqua, cyan, lightcyan, paleturquoise, aquamarine, turquoise, mediumturquoise, darkturquoise, cadetblue, steelblue, lightsteelblue, powderblue, lightblue, skyblue, lightskyblue, deepskyblue, dodgerblue, cornflowerblue, mediumslateblue, royalblue, blue, mediumblue, darkblue, navy, midnightblue.

Grays: gainsboro, lightgray, silver, darkgray, gray, dimgray, lightslategray, slategray, darkslategray.

The Story of RebeccaPurple

One named color has a unique origin. In 2014, the CSS community added “rebeccapurple” (#663399) in honor of Rebecca Meyer, the six-year-old daughter of CSS pioneer Eric Meyer, who passed away from brain cancer. It remains the only CSS named color added for a personal tribute and serves as a reminder of the human connections within the web standards community.

When to Use Named Colors

Prototyping and learning: Named colors speed up development when exact colors do not matter. Writing “background: tomato” is faster than looking up a HEX code and communicates intent clearly.

Readable CSS: In some contexts, named colors make stylesheets more scannable. “border: 1px solid lightgray” immediately communicates the visual intent without decoding a HEX value.

Placeholder styles: During early development, named colors like “hotpink” or “lime” serve as obvious placeholders that are easy to spot and replace with final brand colors before launch.

When to Avoid Named Colors

Brand consistency: Named colors do not match brand palettes. Your brand blue is unlikely to be exactly “blue” (#0000FF), “royalblue” (#4169E1), or any other named color. Use exact HEX or HSL values for brand colors.

Design systems: Systematic color management requires custom values organized by purpose (primary, secondary, surface, error). Named colors lack this semantic structure.

Precision work: Named colors offer no control over shades and tints. For nuanced design, HEX, RGB, or HSL provide the granularity needed.

Use the color tools on CalcHub to explore named colors and their HEX equivalents, or check our CSS tools for design utilities.

Explore CSS named colors and their values on CalcHub.