CSS Named Colors: A Modern Reference for the IE Color Table - Yenra

Use a standard keyword in CSS

.notice {
  color: navy;
  background-color: ivory;
  border: 2px solid teal;
}

These names have fixed color values. green means #008000, while lime means #00FF00. aqua and cyan share a value, as do fuchsia and magenta. Names are convenient for experiments and reference; a site's design tokens can give the same colors role-based names such as “navigation background.”

The W3C named-color table is the source for the values below. It includes established names inherited from earlier color systems; the names describe conventions, so their apparent brightness and naming relationships can be surprising. For arithmetic and six-digit notation, see RGB and hex conversion.

Find a CSS named color

Filter by name, hex, or decimal RGB value

148 color names. All values remain available with JavaScript disabled.

Swatches have a border so pale colors remain distinguishable on this page. Copy the adjacent text value; each label stays on a neutral background for legibility. A swatch itself makes no claim about the suitability of that color for text.

Translate Internet Explorer-era labels carefully

An old printed or image-based table may abbreviate long names to fit a cell. Treat the visible abbreviation as a label to investigate. For example, use blanchedalmond for #FFEBCD, cornflowerblue for #6495ED, and darkgoldenrod for #B8860B. The shortened labels “blanchedalm,” “cornflrbl,” and “darkgrod” are absent from the standard keyword list.

If a declaration is ignored, first verify spelling and syntax, then inspect which stylesheet rule supplies the rendered color. A fallback or inherited color can make an invalid name appear to work. Replacing the name with its verified hex value is a useful diagnostic step. Record intended design colors before changing a large legacy stylesheet.

Separate named colors from system colors

Ordinary names such as navy represent fixed sRGB colors. CSS system colors, including Canvas and CanvasText, represent user-interface roles whose values depend on the environment. Pair background and text roles when using them. Older keywords such as ActiveCaption appear in the specification's deprecated system-color appendix, so treat them as compatibility material when maintaining old code.

transparent and currentColor are separate keywords, outside this fixed named-color chart. The former represents transparent black; the latter follows the element's color value. A partially transparent foreground also depends on what is behind it.

For a final check, test your component's normal, hover, focus, and disabled states, including a forced-colors environment where applicable. Use the opaque color-pair calculator for ordinary text pairs, and the WCAG guidance on use of color when color communicates a status or action. A red border needs an accompanying explanation that users can perceive without distinguishing the hue.