CSS Named Colors

CSS Named Colors
Name	CSS Named Colors
Type	Color specification
Introduced	1996
Standard	World Wide Web Consortium, Internet Engineering Task Force
Related	Cascading Style Sheets, HTML 4.01, HTML5

CSS Named Colors

CSS Named Colors are a set of predefined color identifiers used in Cascading Style Sheets to specify foreground, background, border, and other color properties. They provide a mnemonic, human-readable alternative to numeric color formats such as RGB color model, Hexadecimal (color), and HSL (color space). Widely adopted across web technologies, these names intersect with standards bodies, browser vendors, design systems, and accessibility guidelines from organizations such as the World Wide Web Consortium and the Web Accessibility Initiative.

Overview

CSS Named Colors form part of the styling vocabulary in Cascading Style Sheets and interact with specifications from the Internet Engineering Task Force and the World Wide Web Consortium. The palette traces conceptual links to earlier color naming systems like the X11, SVG, and HTML 4.01 sets, and informs modern toolchains used by companies such as Mozilla Corporation, Google, Microsoft, Apple Inc., and projects like Chromium, Firefox, WebKit. Implementation choices influence rendering engines including Blink (browser engine), Gecko (software), and KHTML.

List of Standard Named Colors

The official set includes legacy names standardized across HTML5 and CSS Color Module Level 3 and expanded in later specifications such as CSS Color Module Level 4. Common entries include names like "AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Black", "Blue", "Brown", "Chartreuse", "Coral", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "DarkOrange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DodgerBlue", "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", "Gray", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", "LightGoldenRodYellow", "LightGray", "LightGreen", "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSteelBlue", "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "RebeccaPurple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "Seashell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "Snow", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen". These names correspond to precise sRGB values in the specification; mapping decisions reference earlier implementations such as X Window System and Scalable Vector Graphics.

Historical Development and Specifications

The initial naming choices have roots in the X11 color list and the Mosaic era; formalization occurred through HTML 4.01 and subsequent CSS modules ratified by the World Wide Web Consortium. The CSS Color Module Level 3 standardized a stable set that mirrored SVG 1.0 conventions; later, CSS Color Module Level 4 introduced functionality like space-aware color definitions and retained the named keywords while clarifying gamut and conversion rules. Contributors include individuals and organizations represented at standards bodies such as the Internet Engineering Task Force and working groups in the World Wide Web Consortium; implementation feedback came from browser vendors including Netscape Communications Corporation historically and contemporary implementers like Opera Software, Microsoft Edge, and Brave.

Implementation and Browser Support

Support for named colors is ubiquitous across major browsers including Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and engines like Blink (browser engine), Gecko (software), and WebKit. Discrepancies have historically arisen from different interpretations in projects such as X11 and platform toolkits like GTK and Qt. Test suites maintained by WHATWG and the W3C along with vendor test cases from Mozilla Foundation and Google LLC help ensure cross-browser consistency. Performance considerations are minimal; color parsing is handled in style computation phases of rendering pipelines implemented by teams at Apple Inc., Microsoft, and Google.

Usage and Best Practices

Designers and developers integrate named colors in style sheets, component libraries, and frameworks created by organizations such as Bootstrap (front-end framework), Foundation (framework), Angular, React, Vue.js, Tailwind CSS, and design systems from companies like IBM, Atlassian, Salesforce, Adobe Inc., and Figma. Best practices recommend combining named colors with numeric models for opacity and color manipulation via preprocessing tools like Sass, Less, and build systems such as Webpack or Parcel. Teams at GitHub and GitLab often codify palette choices in style guides to align with brand systems and internationalization efforts.

Accessibility and Color Contrast

Accessibility requirements from the Web Content Accessibility Guidelines and guidance from the Web Accessibility Initiative stress contrast ratios defined in WCAG levels AA and AAA; named colors map to sRGB values that must satisfy contrast thresholds against backgrounds. Tools published by organizations such as W3C and projects like axe or Lighthouse test contrast for combinations that include named keywords. Inclusive design practices from entities like Microsoft, Google, and Apple Inc. recommend predictable color semantics, consideration for users with color vision deficiencies, and use of fallback strategies alongside named colors for robust cross-platform rendering.

Category:Web standards