HTML Color Names

How to use HTML color names in CSS

A color name works anywhere CSS accepts a color value, including color, background-color, border-color and box-shadow. These two rules produce the same result, because blue is the name for the hex code #0000FF:

.button { background-color: blue; }
.button { background-color: #0000ff; }

Names also work inline in HTML and in SVG attributes:

<h1 style="color: antiquewhite;">Hello</h1>
<circle cx="50" cy="50" r="40" fill="tomato" />

Names are handy for quick prototypes and readable code. For brand colors you will usually want an exact hex value, which you can pick with the ColorKit color picker.

---

HTML color names FAQ

What are HTML color names?

HTML color names are predefined keywords that browsers map to a fixed color value. Writing tomato gives you the same color as #ff6347, so you can apply a color without looking up its hex code.

How many HTML color names are there?

The CSS Color Module Level 4 specification defines 148 named colors. This list shows 140 of them. The other 8 are 7 alternate “grey” spellings (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey and slategrey), which match their “gray” versions exactly, plus rebeccapurple (#663399), the newest name. A few names also share a value, such as aqua and cyan. Less common names include thistle, rosybrown and seagreen.

Can I create my own color names?

Not as new keywords. The closest option is a CSS custom property, for example --brand: #ff6600; on :root, which you then use as color: var(--brand);.

Do all web browsers support HTML color names?

Yes, every modern browser supports the full list. If a browser does not recognize a value, it ignores that declaration and keeps whatever color the element would otherwise have.

Are HTML color names case-sensitive?

No. AliceBlue, aliceblue and ALICEBLUE all work. Lowercase is the common convention.

Can I use HTML color names outside of HTML and CSS?

Often, yes. SVG uses the same keywords, and many tools that accept CSS colors understand them too. Design apps usually expect hex or RGB values, so check the tool’s documentation. Hex is the most widely supported format.