CSS Color Names Converter
Complete reference for all 148 named CSS colors — with HEX, RGB, HSL values and instant conversion
Showing 148 colors
Free reference
148 named CSS colors — complete reference
All 148 colors
Complete reference for all named CSS colors defined in CSS Color Level 4.
HEX, RGB, and HSL
Look up the HEX, RGB, and HSL equivalent of each named color for use in your CSS.
WCAG contrast
Verify whether each color meets WCAG 2.1 AA and AAA accessibility requirements.
Instant copy
Click any value to copy it directly to the clipboard.
How it works
Three steps, no hassle
Search by color name or value
Type a CSS color name (e.g., 'tomato', 'rebeccapurple', 'cornflowerblue') or its HEX/RGB value to find it instantly in the reference table.
Look up equivalent values
For each named CSS color, get the 6-digit HEX value, RGB components (0-255), HSL values (hue in degrees, saturation and lightness in %), and WCAG contrast ratio.
Copy the value you need
Click any value to copy it to the clipboard. Use it directly in your CSS, Figma, Tailwind, or any design tool.
FAQ
Got questions?
The W3C CSS Color Level 4 specification defines exactly 148 named colors, including the special 'transparent' (equivalent to rgba(0,0,0,0)) and the alias 'rebeccapurple' (added in 2014 in honor of Rebecca Meyer, daughter of CSS author Eric Meyer, who died at age 6). The other 146 names come from MIT's X11 color system, standardized by the W3C in CSS2.1 (1998) and reaffirmed in CSS3. CSS also defines 'currentColor' and 'inherit', but these are inheritance keywords rather than actual color values, so they are not counted among the 148.
X11 colors originate from the rgb.txt file of the X Window System server (MIT X Consortium, 1985). It initially contained a color list created by Paul Raveling of USC's Information Sciences Institute, based on the Resene Colours system from New Zealand. With each version of the X server, the list was expanded and modified by different contributors, creating historical inconsistencies (some colors have variants with and without spaces: 'dark red' vs 'darkred'). When the W3C adopted these names for CSS2.1, they carefully selected them to eliminate ambiguities but kept whimsical names like 'blanchedalmond', 'papayawhip', 'peachpuff', 'lemonchiffon', and 'cornsilk', which come from names of American desserts and textile materials popular in the 1980s.
Named CSS colors are ideal for: rapid prototyping and demo code where readability matters more than precision, educational code where descriptive names help understand intent (e.g., background: lightgray is more readable than background: #d3d3d3), temporary debugging values, and cases where the exact color may vary by browser implementation (though in practice modern browsers are consistent). For production, HEX or HSL values are preferable: they are explicit, don't require the developer to know the name list, and are easier to modify programmatically. Frameworks like Tailwind CSS and modern design systems use their own color palettes, not the standard CSS names.
W3C's WCAG (Web Content Accessibility Guidelines) 2.1 defines minimum contrast ratios for readable text. Level AA (legal minimum in many jurisdictions) requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA (excellence) requires 7:1 for normal text. The ratio is calculated between the relative luminance of the text and the background. Many named CSS colors fail these requirements: 'yellow' (#FFFF00) on white background has a ratio of 1.07:1 (unreadable), while 'black' (#000000) on white has 21:1 (maximum possible). Colors like 'navy', 'darkgreen', 'maroon', and 'midnightblue' have good contrast on white. Chrome and Firefox inspection tools show the WCAG ratio directly when selecting an element.
CSS Color Level 4 (W3C draft in progress) introduces advanced color functions that go far beyond the 148 named colors. oklch() and oklab() are perceptually uniform color spaces where the same numerical delta produces visually equal color changes (unlike HSL where the same lightness delta has very different effects depending on the hue). The color-mix() function allows blending two colors: color-mix(in oklch, blue 30%, red) produces a perceptually natural mix. color-contrast() (still in draft) automatically selects the highest-contrast color from a list. display-p3 and rec2020 allow access to the wide color gamut of modern HDR displays, which have over 25% additional colors compared to sRGB. These functions have growing browser support since 2022-2023.
On June 7, 2014, Rebecca Alicia Meyer, the 6-year-old daughter of Eric A. Meyer (co-founder of the CSS Working Group, author of the definitive CSS reference books 'CSS: The Definitive Guide' and creator of the CSS Reset), died of a glioblastoma (grade IV brain tumor). On the day of her death, the CSS community proposed naming color #663399 (a violet purple that was her favorite) as 'rebeccapurple' in her honor. The proposal was approved by the CSS Working Group and added to the CSS Color Level 4 specification on June 14, 2014 as issue #24 of the W3C repository. It is the only CSS color added for emotional and humanitarian reasons, and the only one among the 148 with a documented personal story that is not inherited from the X11 system.
CSS color history: from X11 (MIT 1985) to CSS Color Level 4, WCAG 2.1, and oklch
The history of named colors in CSS begins in 1985 at MIT's Laboratory for Computer Science with the development of the X Window System server. The rgb.txt file in X11 R3 (released in 1988) contained the first standardized list of colors by name for graphical user interfaces on Unix and X-based systems. This list was originally compiled by Paul Raveling, partially inspired by the Resene Colours system from New Zealand, and was later expanded by multiple contributors across X11 versions R4 (1989), R5 (1991), and R6 (1994). When Tim Berners-Lee and the nascent W3C consortium began defining CSS standards in 1994-1996, adopting the X11 naming system was the natural choice: all Unix-era developers were already familiar with those names. CSS1 (1996) defined only 16 named colors (the same 16 as HTML 3.2: black, white, red, green, blue, yellow, cyan, magenta, and their dark/light variants). CSS2.1 (published as a W3C recommendation in 2011, though worked on since 1998) expanded the list to 147 X11 system colors, plus 'orange' which was already widely used. CSS Color Level 3 (2011) officiated the list of 147+1 names. CSS Color Level 4 added 'rebeccapurple' in 2014, reaching the current 148. The complete specification can be consulted in the W3C CSS Working Group GitHub repository.
The 148 named CSS colors present technical and historical curiosities that any web developer should know. The most notable inconsistency is that CSS recognizes both 'grey' and 'gray' (and their variants: darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, etc.) as identical colors, inheriting the English spelling ambiguity. Another peculiar case is 'lime' (#00FF00) vs 'green' (#008000): in CSS, 'green' is not pure RGB green but a dark green at 50% intensity, while 'lime' is pure RGB green. This differs from the basic HTML colors where 'green' was indeed pure green. The colors 'aqua' and 'cyan' are perfect synonyms (#00FFFF), as are 'fuchsia' and 'magenta' (#FF00FF). The color 'rebeccapurple' has the value #663399, equivalent to rgb(102, 51, 153) or in HSL: hsl(270, 50%, 40%). The darkest colors in the list are 'black' (#000000), 'darkgreen' (#006400, only 39% luminosity), 'midnightblue' (#191970), and 'maroon' (#800000). The lightest are 'white' (#FFFFFF), 'snow' (#FFFAFA), 'ivory' (#FFFFF0), and 'floralwhite' (#FFFAF0). For accessible web development, the named CSS colors with the highest contrast on white backgrounds are 'black' (ratio 21:1), 'maroon' (ratio 5.88:1), 'navy' (ratio 13.87:1), and 'darkgreen' (ratio 9.53:1).
In the context of modern web development, named CSS colors remain relevant but should be understood within the broader ecosystem of color specifications. CSS Color Level 4 introduces the oklch color model (Oklab-based Lightness Chroma Hue), which overcomes HSL's limitations: in HSL, two colors with the same lightness L but different hue H appear to have different visual brightness (yellow appears much brighter than blue at the same L value), while oklch is perceptually uniform. The syntax is oklch(lightness% chroma hue), for example: oklch(70% 0.25 145) for a vivid green. For production projects, the recommended workflow with modern CSS is: (1) define the base palette as custom properties (CSS variables): --color-primary: oklch(60% 0.2 250); (2) use color-mix() to create variants: color-mix(in oklch, var(--color-primary) 80%, white); (3) apply CSS named colors only as fallbacks or in prototypes. Tools like Figma (since 2023), Framer, and Penpot already support the oklch color space for defining palettes. In Tailwind CSS 4.0 (released in 2025), the default color palette was redefined using oklch, replacing the HEX values of previous versions. To verify browser compatibility with new CSS color functions: according to Can I Use, oklch has support in Chrome 111+, Firefox 113+, and Safari 15.4+, covering over 90% of global users in 2024.