CSS Function

Named Color Keywords

CSS defines 148 named color keywords (plus transparent and currentColor) that map to specific RGB values, from aliceblue to yellowgreen.

Syntax

color: <named-color>

Parameters

NameTypeRequiredDescription
named-colorkeywordYesOne of 148 predefined color names (e.g., red, steelblue, rebeccapurple)

Examples

Common named colors

Named colors map to fixed hex values.

css
color: red;          /* #ff0000 */
color: steelblue;    /* #4682b4 */
color: rebeccapurple; /* #663399 */

In Tailwind arbitrary value

Named colors work in Tailwind arbitrary values.

html
<div class="text-[rebeccapurple]">Purple text</div>

As fallback

Named color as a fallback for modern color syntax. Note: put fallback first.

css
background: oklch(0.7 0.15 300);
background: rebeccapurple; /* fallback */

Browser Support

✓

Chrome

v1++

✓

Firefox

v1++

✓

Safari

v1++

✓

Edge

v12++

✓

Opera

v3.5++

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

Tailwind uses its own named palette (blue-500, red-500) rather than CSS named colors

Frequently Asked Questions

How many named colors exist in CSS?▼
There are 148 named colors defined in the CSS Color Level 4 specification, plus the keywords transparent and currentColor.
What is rebeccapurple?▼
rebeccapurple (#663399) was added to CSS in 2014 in memory of Rebecca Meyer, daughter of CSS pioneer Eric Meyer. It is the newest named color.

Explore CSS Color Tools

Try our free tools to work with Named Color Keywords and other CSS color functions.

Open Tools