🎨

HTML Color Codes — Complete Guide to HEX, RGB, HSL & Named Colors (2025)

Q: What is the HEX code for white?

#ffffff — or the shorthand #fff. Both are identical. White is when all three color channels (red, green, and blue) are at their maximum value of 255, which is FF in hexadecimal.

Q: What is the HEX code for black?

#000000 — or the shorthand #000. Black is when all three channels are at 0 — no light at all.

Q: What is the HEX code for transparent?

Pure transparent in HEX is #00000000 — the 8-character format where the last two digits (00) represent full transparency. But in CSS, it's much cleaner to just use transparent as a named value, or rgba(0, 0, 0, 0).

Colors are everywhere on the web — and every single one of them is defined using a color code in HTML and CSS. Whether you're looking for a specific hex code, trying to understand the difference between RGB and HSL, or building a complete color palette for a project — this is the only guide you need. Everything is here.

✍️ By UTS Sites 📅 Updated: 2025 ⏱️ 13 min read 🔖 Bookmark This

⚡

Copy any color code from this guide and paste it directly into our free HTML Editor Online Pro to see it render live. Test colors on your own HTML in real time — no setup needed.

🔤

The 5 Ways to Write Colors in HTML and CSS

There is not just one way to write colors in HTML and CSS — there are five. Each format has its own strengths. Developers use different formats depending on what they need. Here is every format explained clearly:

        All 5 Color Formats — CSS Examples
/* 1. HEX color code — most common */
color: #ff6347;         /* Tomato red */
color: #fff;           /* White — shorthand for #ffffff */
color: #000;           /* Black — shorthand for #000000 */

/* 2. RGB — Red, Green, Blue */
color: rgb(255, 99, 71);   /* Same tomato red */

/* 3. RGBA — RGB with Alpha (opacity) */
color: rgba(255, 99, 71, 0.5);  /* 50% transparent tomato red */
color: rgba(0, 0, 0, 0.8);      /* 80% opaque black overlay */

/* 4. HSL — Hue, Saturation, Lightness */
color: hsl(9, 100%, 64%);    /* Same tomato red */

/* 5. Named colors — 140+ built-in names */
color: tomato;
color: dodgerblue;
color: mediumseagreen;
      

You can use any of these formats anywhere CSS accepts a color value — color, background-color, border-color, box-shadow, outline, and even inside linear-gradient(). All five formats are fully supported in every modern browser.

#️⃣

HEX Color Codes — How They Work

HEX color codes are the most widely used color format in web design. You've seen them everywhere — #ff0000, #3b82f6, #ffffff. But what do these characters actually mean?

A HEX color code is a 6-character string preceded by a # symbol. The six characters are split into three pairs — each pair represents one color channel:

First two characters — Red channel (00 to FF)
Middle two characters — Green channel (00 to FF)
Last two characters — Blue channel (00 to FF)

Each pair is a hexadecimal number from 00 to FF. In decimal, that's 0 to 255. So #ff0000 means Red=255, Green=0, Blue=0 — which is pure red. And #00ff00 is pure green. And #0000ff is pure blue.

        HEX Color Code Breakdown
/* Format: #RRGGBB */
#ff0000  → Red=FF(255), Green=00(0),   Blue=00(0)   = Pure Red
#00ff00  → Red=00(0),  Green=FF(255), Blue=00(0)   = Pure Green
#0000ff  → Red=00(0),  Green=00(0),   Blue=FF(255) = Pure Blue
#ffffff  → Red=FF,     Green=FF,      Blue=FF      = White
#000000  → Red=00,     Green=00,      Blue=00      = Black
#808080  → Red=80,     Green=80,      Blue=80      = Medium Gray

/* 3-character shorthand — when both digits are the same */
#fff   = #ffffff  (white)
#000   = #000000  (black)
#f00   = #ff0000  (red)
#0f0   = #00ff00  (green)

/* 8-character HEX — with alpha/opacity */
#ff000080  = Red at 50% opacity (80 in hex = 128/255 ≈ 50%)
#6a6edbcc  = UTS indigo/purple at ~80% opacity
      

Most Popular HEX Color Codes for Web Design

These are the colors you'll reach for most often in real projects. Not just primary colors — these are the refined, professional shades that actual designers use.

Indigo Blue#6a6edb

Tailwind Blue#3b82f6

Teal / Cyan#2dd4bf

Emerald Green#10b981

Amber Yellow#f59e0b

Red Alert#ef4444

Violet Purple#8b5cf6

Hot Pink#ec4899

Orange#f97316

Dark Navy#1e293b

Slate Gray#64748b

Off White#f1f5f9

🔴

RGB and RGBA — Red, Green, Blue (+ Alpha)

RGB is the color model that screens use to display color — every pixel on your monitor is made up of tiny red, green, and blue lights. RGB in CSS lets you specify each channel from 0 to 255.

RGBA adds a fourth value — Alpha — which controls opacity. The alpha value goes from 0 (completely transparent / invisible) to 1 (completely opaque / solid). This makes RGBA incredibly useful for overlays, shadows, semi-transparent backgrounds, and glassmorphism effects.

        RGB and RGBA — Real Examples
/* Basic RGB usage */
background-color: rgb(99, 102, 241);   /* Indigo */
color: rgb(30, 41, 59);              /* Dark navy text */
border-color: rgb(200, 200, 240);     /* Light purple border */

/* RGBA for transparent overlays */
.dark-overlay {
  background: rgba(0, 0, 0, 0.5);     /* Semi-transparent black */
}

.card-hover {
  background: rgba(106, 110, 219, 0.12); /* Subtle indigo tint */
}

.glassmorphism {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Shadow with RGBA */
box-shadow: 0 4px 24px rgba(106, 110, 219, 0.3);

/* Alpha values reference */
rgba(0,0,0, 0)    = fully transparent
rgba(0,0,0, 0.1)  = 10% opacity (barely visible)
rgba(0,0,0, 0.25) = 25% opacity
rgba(0,0,0, 0.5)  = 50% opacity
rgba(0,0,0, 0.75) = 75% opacity
rgba(0,0,0, 1)    = fully opaque (solid)
      

💡

Modern CSS tip: In CSS Color Level 4 (supported in all modern browsers), you can write RGBA as just rgb(255 99 71 / 50%) — using spaces instead of commas, and a slash before the alpha value. Both formats work. The old comma syntax is still perfectly valid too.

🌈

HSL Colors — The Designer's Favorite Format

HSL stands for Hue, Saturation, Lightness. Many experienced designers prefer HSL over HEX or RGB because it is much more intuitive — you can look at an HSL value and actually understand what color it will be, without running it through a color picker first.

Hue (0–360) — The base color, expressed as a degree on the color wheel. 0 = Red, 60 = Yellow, 120 = Green, 180 = Cyan, 240 = Blue, 300 = Magenta, 360 = Red again.
Saturation (0%–100%) — How vivid the color is. 0% is completely gray (no color at all), 100% is the purest, most vibrant version of that hue.
Lightness (0%–100%) — How light or dark the color is. 0% is always black, 100% is always white, 50% is the "normal" middle value.

        HSL and HSLA — Examples
/* Format: hsl(hue, saturation, lightness) */
color: hsl(0, 100%, 50%);     /* Pure red */
color: hsl(120, 100%, 50%);   /* Pure green */
color: hsl(240, 100%, 50%);   /* Pure blue */
color: hsl(0, 0%, 50%);       /* Medium gray */
color: hsl(0, 0%, 100%);      /* White */
color: hsl(0, 0%, 0%);        /* Black */

/* The real power of HSL — creating color families */
/* Same hue (220 = nice blue), different lightness */
hsl(220, 80%, 20%)   /* Very dark blue */
hsl(220, 80%, 40%)   /* Dark blue */
hsl(220, 80%, 60%)   /* Medium blue */
hsl(220, 80%, 80%)   /* Light blue */
hsl(220, 80%, 95%)   /* Very light blue background */

/* HSLA with opacity */
background: hsla(220, 80%, 60%, 0.3);  /* Same blue, 30% opacity */
      

The real power of HSL shines when you're building a design system or a consistent color palette. You can take one hue value — say 220 — and create an entire range of shades just by adjusting the lightness. This is exactly how popular CSS frameworks like Tailwind CSS and design systems like Material Design are built.

📛

All 140 HTML Named Colors — Complete Reference

HTML and CSS support 140 built-in named colors. You can use these names directly in your code instead of memorizing a HEX code. They're real words — tomato, coral, dodgerblue, mediumseagreen. They're especially handy for quick prototyping and learning.

Reds and Pinks

Name	HEX	RGB
red	`#ff0000`	`rgb(255,0,0)`
crimson	`#dc143c`	`rgb(220,20,60)`
tomato	`#ff6347`	`rgb(255,99,71)`
orangered	`#ff4500`	`rgb(255,69,0)`
hotpink	`#ff69b4`	`rgb(255,105,180)`
lightpink	`#ffb6c1`	`rgb(255,182,193)`
palevioletred	`#db7093`	`rgb(219,112,147)`
mediumvioletred	`#c71585`	`rgb(199,21,133)`

scroll

Oranges and Yellows

Name	HEX	RGB
orange	`#ffa500`	`rgb(255,165,0)`
darkorange	`#ff8c00`	`rgb(255,140,0)`
gold	`#ffd700`	`rgb(255,215,0)`
yellow	`#ffff00`	`rgb(255,255,0)`
lightsalmon	`#ffa07a`	`rgb(255,160,122)`
khaki	`#f0e68c`	`rgb(240,230,140)`
papayawhip	`#ffefd5`	`rgb(255,239,213)`

scroll

Greens

Name	HEX	RGB
green	`#008000`	`rgb(0,128,0)`
lime	`#00ff00`	`rgb(0,255,0)`
mediumseagreen	`#3cb371`	`rgb(60,179,113)`
seagreen	`#2e8b57`	`rgb(46,139,87)`
lightgreen	`#90ee90`	`rgb(144,238,144)`
darkgreen	`#006400`	`rgb(0,100,0)`
greenyellow	`#adff2f`	`rgb(173,255,47)`
lawngreen	`#7cfc00`	`rgb(124,252,0)`

scroll

Blues and Cyans

Name	HEX	RGB
blue	`#0000ff`	`rgb(0,0,255)`
dodgerblue	`#1e90ff`	`rgb(30,144,255)`
royalblue	`#4169e1`	`rgb(65,105,225)`
skyblue	`#87ceeb`	`rgb(135,206,235)`
deepskyblue	`#00bfff`	`rgb(0,191,255)`
cyan / aqua	`#00ffff`	`rgb(0,255,255)`
darkcyan	`#008b8b`	`rgb(0,139,139)`
navy	`#000080`	`rgb(0,0,128)`

scroll

Purples and Violets

Name	HEX	RGB
purple	`#800080`	`rgb(128,0,128)`
violet	`#ee82ee`	`rgb(238,130,238)`
darkviolet	`#9400d3`	`rgb(148,0,211)`
blueviolet	`#8a2be2`	`rgb(138,43,226)`
orchid	`#da70d6`	`rgb(218,112,214)`
plum	`#dda0dd`	`rgb(221,160,221)`
indigo (custom)	`#6a0dad`	`rgb(106,13,173)`
indigo (named)	`#4b0082`	`rgb(75,0,130)`

scroll

Whites, Grays and Blacks

Name	HEX	RGB
white	`#ffffff`	`rgb(255,255,255)`
ghostwhite	`#f8f8ff`	`rgb(248,248,255)`
whitesmoke	`#f5f5f5`	`rgb(245,245,245)`
lightgray	`#d3d3d3`	`rgb(211,211,211)`
gray	`#808080`	`rgb(128,128,128)`
dimgray	`#696969`	`rgb(105,105,105)`
darkgray	`#a9a9a9`	`rgb(169,169,169)`
black	`#000000`	`rgb(0,0,0)`

scroll

🌅

CSS Gradients — How to Use Colors Beautifully

A solid color background is fine. But gradients — smooth transitions between two or more colors — are what make modern websites look genuinely beautiful. CSS makes gradients surprisingly easy to write.

Linear Gradients

        CSS Linear Gradient Examples
/* Left to right */
background: linear-gradient(to right, #6a6edb, #2dd4bf);

/* Top to bottom (default direction) */
background: linear-gradient(#667eea, #764ba2);

/* At an angle */
background: linear-gradient(135deg, #f093fb, #f5576c);

/* Three color gradient */
background: linear-gradient(135deg, #6a6edb, #2dd4bf, #e879f9);

/* With color stops (control where colors change) */
background: linear-gradient(to right, #6a6edb 0%, #6a6edb 40%, #2dd4bf 100%);
      

UTS Signature

linear-gradient(135deg, #6a6edb, #2dd4bf)

Purple Dream

linear-gradient(135deg, #667eea, #764ba2)

Pink Flamingo

linear-gradient(135deg, #f093fb, #f5576c)

Ocean Blue

linear-gradient(135deg, #4facfe, #00f2fe)

Fresh Mint

linear-gradient(135deg, #43e97b, #38f9d7)

Sunset

linear-gradient(135deg, #fa709a, #fee140)

Radial Gradients

/* Radial gradient — circular or elliptical */
background: radial-gradient(circle, #6a6edb, #0a0a1a);
background: radial-gradient(ellipse at top, #e879f9, transparent);
background: radial-gradient(circle at 30% 50%, rgba(106,110,219,.4) 0%, transparent 60%);
      

🔧

CSS Color Properties — Every Place You Can Use Colors

You can use color values in many more CSS properties than just color and background-color. Here is every CSS property that accepts a color value:

        All CSS Properties That Accept Color Values
/* Text */
color: #333;                  /* Text color */
text-decoration-color: red;   /* Underline/strikethrough color */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

/* Background */
background-color: #f0f0ff;
background: linear-gradient(135deg, #6a6edb, #2dd4bf);

/* Borders */
border-color: #c8c8f0;
border: 1px solid #c8c8f0;
outline-color: dodgerblue;

/* Shadows */
box-shadow: 0 4px 20px rgba(106,110,219,0.3);
drop-shadow: 2px 4px 8px rgba(0,0,0,0.2);

/* SVG-specific */
fill: #6a6edb;              /* Fill color of SVG shapes */
stroke: #2dd4bf;            /* Outline color of SVG shapes */

/* Scrollbar (Chrome/Edge) */
::-webkit-scrollbar-thumb { background: #6a6edb; }
::-webkit-scrollbar-track { background: #f0f0ff; }

/* CSS Custom Properties (variables) — best practice for color systems */
:root {
  --color-primary: #6a6edb;
  --color-secondary: #2dd4bf;
  --color-text: #0c0c2a;
  --color-bg: #f0f0ff;
}

.button {
  background: var(--color-primary);
  color: white;
}
      

🎯

Best Practice: Always define your brand colors as CSS Custom Properties (variables) in the :root selector. Then use var(--color-name) throughout your CSS. When you need to change a color, you only change it in one place instead of hunting through hundreds of lines of CSS.

♿

Color Contrast — Why It Matters for Accessibility and SEO

Color contrast is one of the most commonly ignored aspects of web design — and one of the most important. If there isn't enough contrast between your text color and background color, people with visual impairments simply cannot read your content. And Google's accessibility signals are a real ranking factor.

The Web Content Accessibility Guidelines (WCAG) define two levels of contrast compliance:

AA Level (minimum) — Normal text needs a contrast ratio of at least 4.5:1. Large text (18px+) needs 3:1.
AAA Level (enhanced) — Normal text needs 7:1 contrast ratio. Large text needs 4.5:1.

        Good vs Bad Color Contrast Examples
/* ✅ GOOD — High contrast, easy to read */
color: #0c0c2a;          /* Dark text on light background */
background-color: #ffffff;

/* ✅ GOOD — White text on dark background */
color: #ffffff;
background-color: #1e1e48;

/* ❌ BAD — Light gray on white — impossible to read */
color: #cccccc;
background-color: #ffffff;

/* ❌ BAD — Yellow on white — looks fine but fails contrast check */
color: #ffff00;
background-color: #ffffff;
      

⚠️

Never use light gray text on a white background for body copy. It looks "modern" but it fails accessibility standards and drives users away — especially on bright screens or in sunlight. Dark text on a light background or white text on a dark background is always the right choice for readability.

Test Your Color Choices on Real HTML

Apply any color from this guide to your HTML and see it live instantly. Use HTML Editor Online Pro — paste your code, preview the result, check how it looks on mobile. Free, no signup, works right now.

🎨 Open HTML Editor Free →

❓

Frequently Asked Questions About HTML Color Codes

Q: What is the HEX code for white?
#ffffff — or the shorthand #fff. Both are identical. White is when all three color channels (red, green, and blue) are at their maximum value of 255, which is FF in hexadecimal.

Q: What is the HEX code for black?
#000000 — or the shorthand #000. Black is when all three channels are at 0 — no light at all.

Q: What is the HEX code for transparent?
Pure transparent in HEX is #00000000 — the 8-character format where the last two digits (00) represent full transparency. But in CSS, it's much cleaner to just use transparent as a named value, or rgba(0, 0, 0, 0).

Q: Which is better — HEX or RGB?
Neither is "better" — they produce identical colors. Use HEX when you're copying colors from a design tool like Figma or Adobe XD (they output HEX). Use RGBA when you need transparency. Use HSL when you're building a color system and want to create shades easily by adjusting lightness values.

Q: How do I find the hex code of a color on a website?
Use your browser's developer tools. Right-click any element, click Inspect, find the color property in the CSS panel, and you'll see the exact color value used. Chrome DevTools even shows a color picker when you click the color swatch in the CSS panel.

Q: What is the difference between #000 and rgb(0,0,0)?
Absolutely none — they produce exactly the same color: black. Both are completely valid and will display identically in every browser. The choice is purely a matter of personal preference and which format fits better in your workflow.