HTML Color Codes Guide

Everything you need to know about HTML and CSS color codes — named colors, HEX, RGB, HSL and how to use them correctly.

What Are HTML Color Codes?

HTML color codes are the values accepted by HTML and CSS to specify a color. Every browser supports the same five formats:

Named colors: coral, skyblue, rebeccapurple
HEX: #FF7F50, #FFF, #FF7F5080
RGB: rgb(255, 127, 80)
RGBA: rgba(255, 127, 80, 0.5)
HSL / HSLA: hsl(16, 100%, 66%), hsla(16, 100%, 66%, 0.5)

The 148 CSS Named Colors

The CSS specification defines 148 named colors. They are convenient but limited — you cannot specify arbitrary colors with names.

Basic named colors (16)

The original 16 basic colors supported by all browsers since the 1990s:

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua

Extended named colors (132)

Added by CSS Color Module Levels 3 and 4, these include coral, salmon, skyblue, rebeccapurple, and dozens of specific hues.

Notable named colors

RebeccaPurple: Added in CSS Color 4 to honor Rebecca Meyer
Coral: #FF7F50 — a warm orange-pink
SkyBlue: #87CEEB — a soft light blue
Tomato: #FF6347 — a bright red-orange
ForestGreen: #228B22 — a deep natural green
Gold: #FFD700 — a rich yellow

Named Colors vs HEX

Named colors are easier to read but limited to 148 options. HEX can express any of the 16.7 million colors.

Aspect	Named	HEX
Readability	Excellent	Fair
Color range	148 colors	16.7 million
Transparency	No	Yes (8-digit)
Best for	Prototypes, docs	Production

HEX Color Codes

HEX is the most common format in production. Format: #RRGGBB

#000000 — black
#FFFFFF — white
#FF0000 — red
#155EEF — OmniColor blue

Short form (3-digit): #F00 equals #FF0000. Works only when pairs are identical.

With alpha (8-digit): #155EEF80 — 50% opacity blue.

RGB Color Codes

Format: rgb(r, g, b) where each value is 0–255.

rgb(0, 0, 0) — black
rgb(255, 255, 255) — white
rgb(21, 94, 239) — OmniColor blue

RGBA adds alpha: rgba(21, 94, 239, 0.5) — 50% opacity.

HSL Color Codes

Format: hsl(h, s%, l%)

hsl(0, 0%, 0%) — black
hsl(0, 0%, 100%) — white
hsl(215, 84%, 51%) — OmniColor blue

HSLA adds alpha. Modern CSS also allows space-separated syntax: hsl(215 84% 51%).

Where Color Codes Are Used in HTML

Inline CSS

<p style="color: #155EEF;">Blue text</p>

Style tags

<style>
  body { background: #FFFFFF; color: #15243B; }
</style>

External stylesheets

<link rel="stylesheet" href="/styles.css">

HTML attributes

<meta name="theme-color" content="#155EEF">

Where Color Codes Are NOT Used

Some HTML elements used to accept color attributes but no longer do:

<body bgcolor> — deprecated, use CSS instead
<font color> — deprecated since HTML 4
<hr color> — not supported

Always use CSS for color styling, not HTML attributes.

Common Named Color Examples

Some named colors that map to visually distinct values:

Coral: #FF7F50 — a warm salmon-orange
Salmon: #FA8072 — lighter pink-orange
Crimson: #DC143C — deep red with blue undertone
Teal: #008080 — deep blue-green
Turquoise: #40E0D0 — bright blue-green
Lavender: #E6E6FA — pale purple
Indigo: #4B0082 — deep blue-purple
Khaki: #F0E68C — pale yellow-brown
Chocolate: #D2691E — rich brown

Best Practices

Use HEX in production

HEX is compact, universal, and the standard in most design tools and CSS codebases.

Use HSL for design systems

HSL is easier to adjust for palette generation and theming.

Use named colors for prototypes

Named colors are fast to type and read well in quick mockups.

Test contrast

Every text-on-background pair should pass WCAG. Verify with our contrast checker.

Common Mistakes

Forgetting the # in HEX

CSS allows HEX without # in some contexts, but it is not universal. Always include it.

Using invalid named colors

Not every color name works — only the 148 from the CSS spec. "Blurple" or "rosegold" are not valid.

Missing the alpha syntax

RGBA and HSLA use different formats: rgba(255, 0, 0, 0.5) — with comma before alpha. Not rgb(255, 0, 0, 0.5).