CSS Named Colors vs HEX — Should You Write "red" or "#ff0000"?

CSS accepts both named colors and HEX codes for the same properties. You can write color: red or color: #ff0000 and both produce the same result in most cases. So which should you use, and when does it actually matter?

The answer is nuanced — named colors are convenient for quick work, but HEX (or HSL) is almost always the right choice for production code and any situation where precision matters.

What Are CSS Named Colors?

CSS defines 140+ named colors — keywords you can use directly in CSS without a HEX or RGB value. They include familiar ones like red, blue, green, and black, and more specific ones like tomato, cornflowerblue, darkolivegreen, and rebeccapurple.

The full list is defined by the CSS specification and is consistent across all browsers. Named colors are case-insensitive — Red, RED, and red all work.

Some examples:

• red = #ff0000
• blue = #0000ff
• cornflowerblue = #6495ed
• darkorchid = #9932cc
• rebeccapurple = #663399

When Named Colors Are Fine to Use

• Quick prototyping — when you are scaffolding a layout and the exact color does not matter yet
• Utility classes — if you are writing a color: red warning style and red is genuinely the right color
• Semantic meaning — transparent is a named color that is genuinely useful and has no HEX equivalent
• Black and white — color: black and background: white are readable and precise

Sell Custom Apparel — We Handle Printing & Free Shipping

When You Should Use HEX (or HSL) Instead

Any time you are matching a specific brand or design color. There is only one "red" in CSS, and it is #ff0000 — a vivid, full-saturation red that rarely appears in real-world brand color systems. Your brand's red is almost certainly a specific shade that requires a precise HEX code.

Any time you are building a design system. Named colors cannot be stored in CSS custom properties in a way that is adjustable. HEX and especially HSL allow you to build systematic color relationships:

--brand-blue: hsl(213, 72%, 59%);
--brand-blue-light: hsl(213, 72%, 80%);
--brand-blue-dark: hsl(213, 72%, 35%);

Any time you want to use rgba() for transparency. You cannot write rgba(red, 0.5) — you need the numeric values. Get the RGB from a color picker and use rgba(255, 0, 0, 0.5).

How to Find the HEX Code for a Named CSS Color

Open a free color picker, enter the CSS named color in the dialog's hex field (type the equivalent HEX value — most browsers show this in DevTools when you inspect an element using a named color), and copy the output. You can also type the named color into a browser's DevTools console: getComputedStyle(document.body).color after setting it will return the computed rgb() value.

For any color beyond simple named colors, use a color picker to select the precise shade you need and copy the HEX code. This gives you a value that is portable, precise, and will look the same in every browser.

Frequently Asked Questions

Are all 140 CSS named colors supported in every browser?

Yes. The 140 named colors in the CSS Color Level 4 specification are supported in all modern browsers. The one exception historically was rebeccapurple, added in 2014 as a tribute to Eric Meyer's daughter — it is now universally supported.

Is there a performance difference between named colors and HEX?

No meaningful difference. Both are parsed by the browser's CSS engine into the same internal representation before rendering. Performance is not a factor in choosing between them.

Can I use CSS named colors in Figma or Canva?

No. Design tools use HEX, RGB, or HSL inputs — they do not accept CSS named color keywords. Use a color picker to find the HEX equivalent of any named color you want to use in a design tool.

What is "transparent" in CSS and does it have a HEX equivalent?

transparent is equivalent to rgba(0, 0, 0, 0) — fully transparent black. It is a named color with no direct HEX equivalent since HEX does not encode transparency in its standard six-character form (you would need an 8-character HEXA code: #00000000).