Colors Named Colors
CSS ships with more than 140 predefined named colors, readable keywords like tomato or rebeccapurple that each map to one fixed color value.
What a named color is
A named color is a plain-English keyword that stands in for one exact, unchanging color value. Writing color: tomato; is identical to writing color: #FF6347; — the browser looks the keyword up in a fixed table and applies the same value every time, on every browser and every device.
Using named colors
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: rebeccapurple;
}
.card {
background-color: cornflowerblue;
border: 2px solid slategray;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="card">A card with a named-color background and border.</div>
</body>
</html>The first set of names came from the original HTML color list, just 16 basic keywords such as red, blue, and gray. The CSS Color specification later expanded that list to the 140+ names browsers support today, including one added as a tribute: rebeccapurple, named in memory of web developer Eric Meyer's daughter Rebecca.
Named colors are fixed, not adjustable
A named color has no separate channels you can tune. hsl() lets you change lightness by editing one number, and hex or rgb() let you nudge individual red, green, or blue channels, but a name like tomato is a single locked-in value with no parameters. If you need a slightly darker tomato, you have to abandon the name entirely and switch to its hex or hsl equivalent, then adjust that instead.
Names have no dial to turn
<!DOCTYPE html>
<html>
<head>
<style>
/* This is not valid CSS — names cannot take parameters */
/* color: tomato(80%); */
/* To darken it, switch formats instead */
.dark-tomato {
color: hsl(9, 100%, 40%);
}
</style>
</head>
<body>
<p class="dark-tomato">This text is a darker shade of tomato.</p>
</body>
</html>- Great for quick prototypes, demos, and code samples where readability beats precision
- Useful in documentation and teaching, since tomato means more at a glance than #FF6347
- A poor fit for a design system that needs exact, tunable brand colors
- Cannot be smoothly adjusted or derived from — every variant needs a different name
A few gotchas
Names are case-insensitive, so Tomato, TOMATO, and tomato all work identically. Spelling also occasionally offers two accepted forms, such as gray and grey, or slategray and slategrey — both resolve to the same value. Not every name is intuitive: mediumspringgreen, papayawhip, and rebeccapurple are all real, valid CSS colors, so it is worth checking a reference list rather than guessing.
