How many named colors does CSS support?

CSS supports 147 named colors, defined in the CSS Color Module and inherited from the SVG color keywords. This includes the original 16 CSS1 colors plus the extended palette, with rebeccapurple added in 2014.

What is the difference between green and lime?

green is #008000, a dark, muted green, while lime is #00FF00, the bright pure green of monitors. The names date from a time when display palettes were limited, and the mismatch often surprises new developers.

What does currentColor do in CSS?

currentColor resolves to the computed value of the element's color property. It lets borders, icons, and other elements inherit the text color automatically, which simplifies theming and ensures consistent color without duplicating values.

HTML Color Names: Complete List of 147 CSS Colors

CSS supports 147 named colors - keyword values you can use anywhere a hex code works. They are the oldest part of the web's color vocabulary, and while most designers work in hex or HSL, named colors still appear everywhere: in documentation, in rapid prototyping, in CSS frameworks, and in code samples. This is a complete, organized reference to all 147 names with their hex equivalents.

How Named Colors Work

A named color is just a keyword the browser maps to a specific RGB value. For example, 'tomato' is #FF6347 and 'rebeccapurple' is #663399. You can use them in any CSS property that accepts a color: background-color, color, border-color, fill, stroke, and gradients. They are also case-insensitive - 'RebeccaPurple' works - and they resolve identically to their hex values in computed styles.

The list is defined in the CSS Color Module and has grown over time. CSS1 introduced 16 basic colors. CSS2 added orange and a handful more. The modern list of 147 comes from the SVG color keywords standardized in CSS Color Level 3, which included 'rebeccapurple' in a later revision as a tribute to Rebecca Meyer.

The 16 Basic Colors

These are the original CSS1 colors and the backbone of the named palette:

Black #000000
Silver #C0C0C0
Gray #808080
White #FFFFFF
Maroon #800000
Red #FF0000
Purple #800080
Fuchsia #FF00FF
Green #008000
Lime #00FF00
Olive #808000
Yellow #FFFF00
Navy #000080
Blue #0000FF
Teal #008080
Aqua #00FFFF

Note the gotchas: 'green' is a dark green (#008000), while the bright screen green is 'lime'. 'fuchsia' and 'aqua' are the names for magenta and cyan. These mismatches between common perception and the spec trip up many developers.

The Extended Palette (Organized by Hue Family)

The remaining colors group into recognizable families:

Reds and pinks: indianred #CD5C5C, lightcoral #F08080, salmon #FA8072, darksalmon #E9967A, lightsalmon #FFA07A, crimson #DC143C, firebrick #B22222, darkred #8B0000, pink #FFC0CB, lightpink #FFB6C1, hotpink #FF69B4, deeppink #FF1493, mediumvioletred #C71585, palevioletred #DB7093.

Oranges: coral #FF7F50, tomato #FF6347, orangered #FF4500, darkorange #FF8C00, orange #FFA500, gold #FFD700.

Yellows and browns: yellow #FFFF00, lightyellow #FFFFE0, lemonchiffon #FFFACD, lightgoldenrodyellow #FAFAD2, papayawhip #FFEFD5, moccasin #FFE4B5, peachpuff #FFDAB9, palegoldenrod #EEE8AA, khaki #F0E68C, darkkhaki #BDB76B, cornsilk #FFF8DC, bisque #FFE4C4, navajowhite #FFDEAD, wheat #F5DEB3, burlywood #DEB887, tan #D2B48C, rosybrown #BC8F8F, sandybrown #F4A460, goldenrod #DAA520, darkgoldenrod #B8860B, peru #CD853F, chocolate #D2691E, saddlebrown #8B4513, sienna #A0522D, brown #A52A2A, maroon #800000.

Greens: darkolivegreen #556B2F, olivedrab #6B8E23, yellowgreen #9ACD32, limegreen #32CD32, lawngreen #7CFC00, chartreuse #7FFF00, greenyellow #ADFF2F, springgreen #00FF7F, mediumspringgreen #00FA9A, lightgreen #90EE90, palegreen #98FB98, darkseagreen #8FBC8F, mediumseagreen #3CB371, seagreen #2E8B57, forestgreen #228B22, darkgreen #006400, mediumaquamarine #66CDAA, aquamarine #7FFFD4, darkcyan #008B8B, lightseagreen #20B2AA, mediumturquoise #48D1CC, turquoise #40E0D0.

Blues and cyans: cadetblue #5F9EA0, steelblue #4682B4, lightsteelblue #B0C4DE, powderblue #B0E0E6, lightblue #ADD8E6, skyblue #87CEEB, lightskyblue #87CEFA, deepskyblue #00BFFF, dodgerblue #1E90FF, cornflowerblue #6495ED, royalblue #4169E1, mediumslateblue #7B68EE, slateblue #6A5ACD, darkslateblue #483D8B, midnightblue #191970, navy #000080, darkblue #00008B, mediumblue #0000CD, blue #0000FF, aliceblue #F0F8FF, lavender #E6E6FA, lightcyan #E0FFFF, paleturquoise #AFEEEE, cyan #00FFFF, aquamarine #7FFFD4.

Purples and magentas: lavender #E6E6FA, thistle #D8BFD8, plum #DDA0DD, violet #EE82EE, orchid #DA70D6, mediumorchid #BA55D3, darkorchid #9932CC, darkviolet #9400D3, blueviolet #8A2BE2, darkmagenta #8B008B, magenta #FF00FF, rebeccapurple #663399, purple #800080, mediumpurple #9370DB, indigo #4B0082.

Whites, grays, and blacks: whitesmoke #F5F5F5, snow #FFFAFA, honeydew #F0FFF0, mintcream #F5FFFA, azure #F0FFFF, ghostwhite #F8F8FF, floralwhite #FFFAF0, seashell #FFF5EE, linen #FAF0E6, antiquewhite #FAEBD7, oldlace #FDF5E6, ivory #FFFFF0, lavenderblush #FFF0F5, mistyrose #FFE4E1, gainsboro #DCDCDC, lightgray #D3D3D3, darkgray #A9A9A9, dimgray #696969, lightslategray #778899, slategray #708090, darkslategray #2F4F4F, gray #808080, silver #C0C0C0, black #000000, white #FFFFFF.

The Special Colors

Three named colors do not have fixed hex values:

transparent - fully transparent, resolves to rgba(0, 0, 0, 0). Used everywhere for layering and effects.
currentColor - inherits the computed value of the color property, making it invaluable for consistent icon and border theming: set color once and everything using currentColor follows.
inherit / initial / unset - not colors themselves but keyword values that flow from CSS inheritance.

'currentColor' deserves a permanent place in your toolkit: it lets an SVG icon match any text color without extra props or CSS variables.

Practical Usage Tips

Readability with low vision: most named colors are mid-tone, so check contrast before using them as text. A tomato button with white text is about 3.9:1 - acceptable for large text, borderline for small.
Prototyping speed: named colors make throwaway CSS far more readable than hex soup, and they self-document in code reviews.
Framework default: many CSS frameworks and reset sheets use named colors in defaults, so recognizing them helps when reading library source.
Case-insensitivity: 'Tomato', 'TOMATO', and 'tomato' all work, a small mercy when copying from documentation.
Not all are web-safe: the old 216-color web-safe palette is obsolete on modern screens; named colors resolve to full RGB and render fine everywhere.

Converting Named Colors to Hex

Any browser DevTools shows the computed RGB for a named color, and every color picker accepts the keyword. For quick conversions, remember the anchor points: red #FF0000, orange #FFA500, gold #FFD700, yellow #FFFF00, lime #00FF00, cyan #00FFFF, dodgerblue #1E90FF, royalblue #4169E1, magenta #FF00FF, hotpink #FF69B4, tomato #FF6347, rebeccapurple #663399. From those you can interpolate most of the extended set.

Named Colors in CSS Frameworks and Design Systems

Modern CSS frameworks have embraced named colors as part of their design token systems, recognizing that named references improve code readability and team communication. Tailwind CSS includes a comprehensive set of named colors in its default configuration - slate, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose - each with a 50-950 shade scale. These names function as an extended vocabulary that makes Tailwind's utility classes more readable: \`bg-blue-600\` communicates intent more clearly than \`bg-[#2563EB]\`. Bootstrap takes a similar approach with its color variables, naming primary, secondary, success, danger, warning, info, light, and dark as semantic labels that map to specific hex values. Design systems like Material Design, Apple's Human Interface Guidelines, and IBM's Carbon Design System all maintain their own named color palettes, and the consistency of naming conventions across these systems has created an informal standard: blues for trust, greens for success, reds for danger, and neutrals for structure. When building a custom design system, adopting this established vocabulary reduces the learning curve for developers who have worked with other systems. The key practice is to document each named color with its purpose, acceptable usage contexts, and contrast relationships with other named colors, creating a reference that prevents misapplication even by team members unfamiliar with the design system.

Using Named Colors with CSS Custom Properties

CSS custom properties transform named colors from simple shorthand into a flexible design token system that maintains code readability while supporting theming. Define your core palette as custom properties using named color references for semantic clarity: set --color-primary to coral, --color-secondary to slate, --color-success to seaGreen, and --color-warning to darkOrange. This approach gives developers the intuitive readability of named colors for common semantic roles while the custom property layer enables runtime theme switching, dark mode variants, and component-level overrides. The inheritance model of custom properties means that a single set of color definitions at the root level cascades through the entire application, and component-level overrides can create context-specific palettes without repeating the base definitions.

Named Colors in Component Libraries

Modern component libraries like Material UI, Ant Design, and Chakra UI use named color tokens as the foundation of their theming systems, and understanding this architecture helps designers and developers collaborate more effectively. A component library typically defines a base palette with names like primary, secondary, error, warning, and info, each mapped to a specific hue with multiple lightness variations. When a designer specifies that a button should use the primary color at the 500 weight, the component library resolves this to the specific hex value defined in its theme configuration. This indirection means that changing the entire color identity of an application requires updating only the theme configuration rather than modifying individual component styles. The practical benefit for designers is that they can define color intent (primary, secondary, accent) without specifying exact hex values, and developers can implement the theme configuration that maps these intents to the precise color values needed for production.

Named Colors in CSS Frameworks

The Takeaway

The 147 CSS named colors are a compact, readable, and fully supported vocabulary that predates and coexists with hex, RGB, and HSL. Know the 16 basics, keep 'currentColor' and 'transparent' in your mental toolkit, check contrast before using mid-tone names for text, and you can prototype, document, and communicate color choices faster than with any other notation - no color picker required.

Named Colors as a Teaching Tool

The named color list is more useful as a learning aid than as a design system. Because the names are anchored to real values - cornflowerblue is #6495ED, seagreen is #2E8B57 - browsing the list builds an instinct for how hue names map to numbers. It also reveals naming quirks worth remembering: gray and grey both resolve to the same value, darkgray is actually lighter than gray, and lightgoldenrodyellow is a real color. For production code, hex or HSL stays the better choice; for building vocabulary, the names are surprisingly effective.