CSS Named Colors: Complete List with Hex Codes

You type color: green in a CSS file and the text appears in a dark, almost forest-like green rather than the bright green you expected. That is because CSS green is #008000, a half-brightness value inherited from the original HTML 4.01 palette. The bright primary green is lime in CSS. This small distinction trips up developers regularly, and it is one of several things about CSS named colors that behave differently from what the name alone suggests.

The color name finder lets you look up any of the 148 CSS named colors by name or hex code and see the exact values instantly. This guide covers the full list organized by color family, explains where each group came from, identifies the alias pairs, and flags which named colors create accessibility problems.

Where CSS Named Colors Come From

CSS did not originate its color names. The list traces back to the X Window System developed at MIT in 1985. X11 included a human-readable color file for graphical interfaces containing hundreds of color names with RGB values. When the web emerged in the early 1990s, HTML inherited a subset of these.

HTML 4.01 (1997) formally defined 16 named colors based on the VGA 16-color palette. These became the baseline every browser had to support. SVG (Scalable Vector Graphics) adopted the broader X11 color list in 2001. When CSS Color Level 3 was published in 2011, it incorporated the SVG named color list, expanding the CSS keyword set from 17 to 147. CSS Color Level 4 (2022) added one more: rebeccapurple. The total is now 148 accepted named color keywords.

The apparent discrepancy across sources: many articles cite 140 because they count only unique hex values and treat alias pairs as single entries. The CSS specification itself lists 148 keywords, counting each alias spelling separately.

The 16 Original CSS Named Colors

These 16 keywords come from HTML 4.01 and map to the VGA 16-color palette. Every CSS-capable browser has supported them since the late 1990s. A critical detail: in this original palette, green is #008000, a half-brightness green. The full-brightness green is lime. CSS 2.1 added orange as the 17th named color.

Notice that navy and maroon are the 50% brightness versions of blue and red respectively. olive is 50% red + 50% green with no blue (a dark yellow-green). The original 16 followed a strict 8-color, 16-color doubling pattern inherited from the VGA palette.

What Is rebeccapurple?

rebeccapurple (#663399) was added to the CSS Color Level 4 specification in June 2014. The name honors Rebecca Meyer, the six-year-old daughter of CSS educator and author Eric Meyer. Rebecca died of brain cancer on June 7, 2014, her birthday.

Eric Meyer is one of the best-known CSS educators on the web, having written definitive guides to CSS layout and cofounded An Event Apart. After Rebecca's death, the web development community proposed naming a CSS color after her as a tribute. The CSS Working Group, which governs the CSS specification, approved the name within days.

The specific name rebeccapurple was Eric Meyer's request. Rebecca had recently told him she was old enough to be called Rebecca rather than Becca. rebeccapurple honors that request. The hex value #663399 encodes equal red and blue channels (both at 102 out of 255) and no green, producing a medium-dark purple that was her favorite shade.

It is the only CSS named color added specifically to honor a person. The addition was supported by browser vendors and the W3C without objection, reflecting the respect the community had for Meyer's contribution to the discipline.

What Are the CSS Color Aliases?

CSS includes named color pairs where two different keywords produce the same hex value. These aliases reconcile the older HTML 4.01 names with the X11 names used in the SVG specification.

The two color aliases:

Seven additional aliases exist for gray spelling variants. Both American English (gray) and British English (grey) spellings are accepted for each:

All 9 alias relationships produce identical computed color values. There is no visual or behavioral difference between writing cyan and aqua, or gray and grey, in any CSS property.

CSS Named Colors by Family

Key CSS named colors organized by color family, with hex and RGB values. The color name finder has the complete 148-keyword interactive reference with search by name or hex.

Reds and pinks

hotpink and deeppink are named for the same hue but differ significantly in saturation: hotpink at RGB(255, 105, 180) is a brighter magenta-pink, while deeppink at RGB(255, 20, 147) is almost fully saturated. The difference between them at the RGB level is in the green channel: 105 vs 20.

Oranges and yellows

CSS orange (#FFA500) and gold (#FFD700) are often confused. Both have maximum red (255). The difference is in the green channel: orange has 165 and gold has 215. Higher green pushes the color toward yellow, which is why gold appears more yellow-toned than orange even though both are fully red at the R channel. The shades of orange color names guide covers the broader orange family including burnt orange, terracotta, and amber, which are not CSS named colors.

Greens

The shades of green color names guide covers CSS and non-CSS greens side by side, including emerald (#50C878), hunter green (#355E3B), and seafoam, which do not appear in the CSS named color list.

Blues and cyans

skyblue and lightskyblue share identical red and green values (135, 206) but differ only in the blue channel: 235 vs 250. The effect is subtle: lightskyblue appears slightly more intensely blue while skyblue reads as slightly more gray-toned.

Purples and violets

The shades of purple color names guide covers the full purple-violet-lavender spectrum with additional names like mauve, amethyst, and wisteria that are not CSS keywords.

Browns and earth tones

Whites, grays, and black

slategray (#708090) is distinctive in the gray family because it has a blue tint: the blue channel (144) is higher than the red (112) and green (128) channels. This gives it a cool, steel-blue tone that distinguishes it from the purely neutral grays like gray (#808080) where all three channels are equal.

Which CSS Named Colors Fail Accessibility Contrast?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal body text against its background, and 3:1 for large text (18pt or 14pt bold). Several popular CSS named colors fail these thresholds when used as text on white.

orange (#FFA500) has a contrast ratio of approximately 1.92:1 against white (#FFFFFF). It fails WCAG at every conformance level. yellow (#FFFF00) against white is 1.07:1, nearly invisible as text. lime (#00FF00) against white is 1.37:1. gold (#FFD700) against white is 1.28:1. These are safe for borders, backgrounds, icons, and decorative elements. They should not be used for body text on light backgrounds.

Colors that pass WCAG AA on white include most of the dark CSS named colors: navy (15.0:1), darkgreen (8.37:1), maroon (8.32:1), darkslategray (10.7:1), saddlebrown (4.83:1), and indigo (9.86:1). Use the contrast checker to verify any color combination before shipping text that uses named colors.

One specific trap: green (#008000) passes WCAG AA on white at approximately 5.13:1, but lime (#00FF00), despite being the brighter green, fails at 1.37:1. The counterintuitive result is that the darker CSS green passes accessibility requirements while the brighter one fails badly.

Named Colors vs. Hex Codes: When to Use Which

color: red and color: #FF0000 are identical instructions to the browser. Named colors do not carry special behavior or different performance characteristics. The choice is purely about readability and flexibility.

Named colors work well for common colors where the name communicates intent without ambiguity: white, black, transparent, and simple accent colors in utility classes or debug stylesheets. Writing border: 1px solid black or background: white is immediately readable without needing to parse a hex value.

Hex codes (or HSL) are necessary for any color outside the 148 named keywords, which is almost every brand or design system color. A design system will specify #1A73E8, not cornflowerblue (#6495ED), because no named color exists at exactly that blue. Precision and custom palette control require hex or functional notation.

One practical use of the named colors: they establish a shared vocabulary for quick communication. Saying a button is steelblue in a team discussion conveys the approximate hue more quickly than reciting a hex code. The color name finder identifies the nearest CSS named color to any hex value, which is useful for converting custom brand colors into the closest standard keyword for documentation or communication. The tints and shades generator creates systematic lighter and darker variants of any color, named or hex, for building scale-based design system palettes.

The color tools section has the color name finder, contrast checker, and tints and shades generator alongside other utilities for CSS color work.