CSS Named Colors: Complete Guide for Web Developers

Explore all 147 CSS color keywords including basic colors, extended palette, and aliases with browser support details and implementation examples.

What Are CSS Named Colors

CSS named colors are a standardized set of color keywords defined in the CSS Color Module Level 4 specification maintained by the World Wide Web Consortium (W3C). These 147 keywords represent 142 unique color values that browsers recognize and render consistently across all platforms and devices. This system provides an intuitive way to specify colors without memorizing hexadecimal notation or RGB values, making stylesheets more readable and maintainable for developers of all skill levels.

The specification divides named colors into two primary categories: basic color keywords and extended color keywords. Basic keywords form the foundation with 16 essential colors that most developers learn first, including primary colors like red, blue, and green, along with neutral tones like black, white, gray, and silver. Extended keywords expand this palette dramatically with 126 additional colors ranging from aliceblue to whitesmoke, offering designers granular options for nuanced visual hierarchies and brand-consistent implementations.

Understanding named colors requires recognizing their role in the broader CSS color ecosystem. While modern CSS supports multiple color notation systems--hexadecimal, RGB, RGBA, HSL, and HSLA--named colors remain uniquely positioned as the only color specification that doesn't require numeric or alphanumeric encoding. This characteristic makes them particularly valuable for rapid prototyping, educational contexts, and scenarios where code readability takes priority over precise color matching. For teams building robust web applications, named colors provide a reliable foundation for consistent visual presentation across all user interfaces.

CSS Named Colors by the Numbers

147

Total Color Keywords

142

Unique Color Values

Basic Color Keywords

126

Extended Color Keywords

The 16 Basic Color Keywords

The basic color keywords represent the foundational palette from which web design evolved. These colors trace their origins to the earliest web browsers and remain universally supported across all rendering engines without exception. The complete list includes:

Neutrals: black, silver, gray (also spelled grey), white

Warm Tones: maroon, red, purple, fuchsia (alias: magenta), olive

Cool Tones: green, lime, yellow, navy, blue, teal, aqua (alias: cyan)

Universal Browser Support

Each basic color corresponds to specific hexadecimal and RGB values that browsers render identically. For instance, the keyword red universally produces #FF0000 or rgb(255, 0, 0), while blue produces #0000FF or rgb(0, 0, 255). This consistency eliminates cross-browser rendering concerns that plague other CSS properties, making named colors a reliable choice when exact color specification matters less than broad compatibility.

Enduring Relevance

Despite decades of web evolution and millions of colors now available through extended keywords and programmatic color systems, these 16 colors remain relevant in modern design systems. Developers frequently use them for error states (red), links (blue), success indicators (green), and neutral interfaces (gray), benefiting from their immediate recognition and universal understanding. This longevity speaks to their practical utility in creating accessible, maintainable web interfaces.

The Extended Color Keywords

Extended color keywords dramatically expand the design possibilities beyond basic colors, introducing 126 additional named values that capture nuanced shades designers commonly require. These colors range from aliceblue (a pale, icy blue at #F0F8FF) to whitesmoke (a warm off-white at #F5F5F5), covering the full spectrum from deep navy to soft coral, from forest green to goldenrod.

Color Organization Patterns

Graduated Variants: lightblue, darkblue, mediumblue, cornflowerblue provide graduated options within color families.

Descriptive Names: Colors like cornflowerblue, lavender, and honeydew reference natural objects, making code intuitive.

Special Cases: rebeccapurple honors Rebecca Alison Meyer; transparent indicates complete transparency.

Notable Extended Colors Include:

Reds: crimson, indianred, lightcoral, salmon, orangered, tomato
Oranges: coral, darkorange, chocolate, saddlebrown
Greens: forestgreen, seagreen, mediumseagreen, yellowgreen
Blues: cornflowerblue, royalblue, steelblue, dodgerblue
Purples: rebeccapurple, mediumorchid, mediumpurple

The extended palette includes organizational patterns that help developers quickly locate appropriate colors. The "light" and "dark" variants create systematic relationships--lightgreen, mediumseagreen, and darkolivegreen provide graduated options within the green family alone. This consistency supports maintainable design systems where color relationships are predictable and easy to adjust.

Color Aliases You Should Know

Several color keywords share identical values in CSS: - **aqua** ↔ **cyan** (both `#00FFFF`) - **fuchsia** ↔ **magenta** (both `#FF00FF`) - **gray** ↔ **grey** (both `#808080`) - All gray variants (darkgray/darkgrey, lightgray/lightgrey, etc.) These aliases exist for historical and compatibility reasons. The `aqua`/`cyan` and `fuchsia`/`magenta` pairs derive from different color theory traditions--`aqua` and `fuchsia` from web design, `cyan` and `magenta` from printing. Supporting both sets ensures developers from different backgrounds can write familiar code while achieving identical rendering results. Browsers accept all spellings, so use whichever convention fits your team's coding style.

Search Intent and Practical Applications

Understanding why developers and designers search for named color information reveals the practical contexts where this knowledge proves most valuable.

Common Search Intent Categories

Quick Reference Lookup: Developers need a comprehensive list of named colors to choose the right shade for their designs. A reference guide like this helps compare options and find the perfect hue for buttons, backgrounds, and accent elements.

Code Learning: Beginners explore available options before committing to specific color values in their stylesheets. Understanding the basic 16 colors provides a foundation before exploring extended options.

Accessibility Verification: WCAG compliance requires understanding color contrast ratios, and named colors provide consistent reference points for calculating these values. Using darkblue on white achieves approximately 11.4:1 contrast ratio--well above AAA requirements.

Design System Implementation: Teams establish systematic color usage patterns across multiple projects, creating consistency in how colors are applied throughout an application. Our web development services include comprehensive design system implementation to ensure visual consistency across your digital presence.

Accessibility Impact

Color blindness affects approximately 8% of men and 0.5% of women. Named colors help create accessible interfaces by providing predictable values that can be tested across different color vision conditions. Using forestgreen for success states and firebrick for errors ensures distinguishable states for users with color vision deficiencies. Always combine color with additional indicators (icons, text labels) to ensure information remains accessible to all users.

Why Use CSS Named Colors

Benefits for developers and designers

Instant Recognition

Keywords like 'red' and 'blue' are immediately understood without memorizing hex codes, making code more accessible to team members of all experience levels.

Universal Support

Works in all modern browsers without vendor prefixes or fallback values, providing exceptional cross-browser compatibility.

Readable Code

Stylesheets using named colors are more maintainable and easier to review during code audits and collaborative development.

Accessibility Foundation

Consistent values enable reliable contrast ratio calculations for WCAG compliance and inclusive design practices.

Compression Efficiency

Repeated keywords compress exceptionally well in gzip and Brotli formats used by modern web delivery networks.

Semantic Clarity

Colors like 'firebrick' or 'cornflowerblue' communicate design intent more clearly than abstract hex codes.

Technical Implementation Guide

Named colors integrate seamlessly with any CSS property that accepts color values, including color, background-color, border-color, and outline-color.

Basic Syntax

/* Basic text coloring */
.primary-text {
 color: navy;
}

/* Background color application */
.highlight-box {
 background-color: lightyellow;
}

/* Border styling */
.featured-border {
 border: 2px solid coral;
}

/* Multiple color properties */
.button {
 background-color: forestgreen;
 color: white;
 border: 1px solid darkgreen;
}

CSS Custom Properties

Named colors work excellently with CSS variables for systematic design tokens:

:root {
 --primary-color: royalblue;
 --success-color: forestgreen;
 --error-color: firebrick;
 --text-color: #333;
 --bg-color: whitesmoke;
}

This approach combines named colors' readability benefits with centralized management through CSS custom properties. When a design update requires changing all success indicators, updating --success-color in one location propagates the change throughout the entire project. For professional implementation of these patterns across your website, our web development team can help establish robust design token systems.

Browser Compatibility

**Universal Support:** Chrome, Firefox, Safari, Edge, Opera **No Prefixes Required:** Works without vendor prefixes **Exception:** `rebeccapurple` requires modern browsers (post-2014) This universal support stems from named colors' fundamental role in CSS history. When browsers first implemented CSS in the late 1990s, named colors provided a simple way to introduce color without requiring developers to understand hexadecimal notation.

Color Value Conversions

Each named color maps to specific values: - **red** → `#FF0000`, `rgb(255,0,0)`, `hsl(0,100%,50%)` - **blue** → `#0000FF`, `rgb(0,0,255)`, `hsl(240,100%,50%)` - **cornflowerblue** → `#6495ED`, `rgb(100,149,237)`, `hsl(218.54,79.19%,66.08%)` These conversions matter when integrating named colors with design systems that rely on specific color spaces.

SEO and Accessibility Considerations

While named colors don't directly influence search engine rankings, their proper implementation affects several accessibility factors that search engines consider in quality assessments. Our SEO services emphasize the importance of accessible design as part of comprehensive search optimization.

Color Contrast Requirements

WCAG guidelines require sufficient color contrast between text and backgrounds:

Passes AAA: darkblue on white (contrast ~11.4:1)
Passes AA: royalblue on white (~6.5:1)
May Fail: lightblue on white (~2.4:1) for body text

Search Engine Considerations

Search engines increasingly consider accessibility as a ranking factor:

Consistent Rendering: Named colors work identically across all browsers, reducing user experience inconsistencies that could impact engagement metrics.
Performance: Microsecond-level parsing differences don't affect Core Web Vitals or page load times.
Accessibility: Proper contrast ratios contribute to mobile-friendliness and usability signals that search engines evaluate.

Color Blindness Compatibility

Test named color usage against common color vision deficiencies:

Success states: forestgreen remains distinguishable for most color vision conditions
Error states: firebrick provides clear contrast against typical backgrounds
Avoid: Using color alone to convey information--always combine with icons or text labels

Implementing accessible color schemes through named colors supports inclusive design while contributing to positive user experience signals that search engines recognize.

Red & Pink

crimson, indianred, lightcoral, salmon, darksalmon, lightsalmon, orangered, tomato, coral, darkorange

Orange & Yellow

orange, gold, goldenrod, darkgoldenrod, peru, chocolate, saddlebrown, sienna, wheat, burlywood

Green & Teal

green, lime, olive, forestgreen, seagreen, mediumseagreen, lightseagreen, darkolivegreen, yellowgreen, chartreuse

Blue & Purple

blue, navy, teal, cornflowerblue, royalblue, steelblue, dodgerblue, rebeccapurple, mediumorchid, mediumpurple

Neutrals

white, black, gray, silver, dimgray, darkslategray, lightslategray, gainsboro, whitesmoke

Warm Whites

floralwhite, ivory, honeydew, lavenderblush, mistyrose, linen, oldlace, seashell, cornsilk, lemonchiffon

Pastels

pink, lightpink, hotpink, deeppink, palevioletred, plum, violet, orchid, thistle, lavender

Earth Tones

sienna, peru, saddlebrown, sandybrown, burlywood, tan, wheat, navajowhite, peachpuff, moccasin

Performance and Best Practices

File Size Considerations

Named colors offer subtle performance advantages:

Transmission Size: red (3 bytes) vs #FF0000 (7 bytes)
Compression: Repeated keywords compress exceptionally well in gzip and Brotli
Parsing: Negligible microsecond differences in rendering that don't affect user experience

When to Use Named Colors

Prefer Named Colors For:

Common colors (white, black, gray, red, blue, green) where keyword communicates intent clearly
Educational content and learning materials where readability matters most
Quick prototyping and development iterations
Semantic color assignments in design systems (error, success, warning states)

Consider Alternatives For:

Brand-specific colors requiring exact specification--use custom properties
Precise design system implementation with specific color values
Colors requiring alpha transparency--use rgba or hsla notation instead

Best Practices

Use semantic color names in design systems (e.g., --success-color instead of --green) to communicate purpose
Document color usage patterns for team consistency and onboarding new developers
Test color contrast ratios before production deployment using tools like WebAIM's contrast checker
Reserve extended colors (papayawhip, moccasin) for explicit design specifications only
Consider CSS custom properties for centralized color management across large projects

Effective use of named colors balances readability, maintainability, and design consistency. For most applications, named colors' readability benefits outweigh any theoretical performance concerns.

Frequently Asked Questions

How many CSS named colors are there?

CSS includes 147 named color keywords representing 142 unique color values. The specification defines 16 basic colors plus 126 extended colors ranging from familiar names like 'crimson' to specific shades like 'cornflowerblue'.

Are CSS named colors case-sensitive?

No. CSS named colors are case-insensitive, meaning 'Red', 'RED', and 'red' all work identically in all browsers. However, lowercase is the widely adopted convention in most codebases.

Do all browsers support named colors?

Yes. Named colors have universal browser support across Chrome, Firefox, Safari, Edge, and Opera without requiring vendor prefixes or fallback values.

What is the difference between aqua and cyan?

None--they are aliases representing identical color values (`#00FFFF`). Use whichever name fits your team's coding convention or personal preference.

Does using named colors affect page performance?

Named colors compress exceptionally well in gzip and Brotli, offering tiny file size benefits. However, the parsing difference is negligible and doesn't affect user experience or Core Web Vitals.

What is rebeccapurple?

rebeccapurple (`#663399`) is a special color added to CSS in honor of Rebecca Alison Meyer. It requires relatively modern browser support (post-2014) and serves as a meaningful tribute within the CSS specification.

Ready to Optimize Your Website?

Our SEO services help your business achieve sustainable organic growth through data-driven strategies and technical excellence.

Sources

Ditig - CSS Named Colors - Complete reference of all 147 CSS named color keywords with technical specifications
W3C CSS Color Module Level 4 - Official W3C specification defining named colors
MDN Web Docs - CSS Named Colors - Browser documentation on named color support
Austin Gil - CSS Named Colors - Developer-focused guide with usage examples and implementation details