HTML Color Codes Every Web Developer Should Know

HTML color codes are the strings browsers use to paint text, backgrounds, borders, and SVG fills. Whether you type #ff5733, rgb(255, 87, 51), or rebeccapurple, the rendering engine converts your declaration into sRGB values on screen.

If you are learning web development, mastering these formats saves time in DevTools, design handoffs, and CSS maintenance.

Named colors in HTML and CSS

HTML supports 140 named colors in modern browsers (from aliceblue to yellowgreen), plus the legacy transparent keyword.

<p style="color: steelblue;">Named color on a paragraph</p>

Named colors are fine for demos and quick prototypes. In production codebases, teams usually prefer hex or modern functions so palettes stay consistent and searchable.

Hex color codes

Hex is the most common format in design files and CSS.

Each pair is hexadecimal: 00 is none of that channel, ff is full intensity.

.button {
  background-color: #2563eb;
  border: 1px solid #1d4ed8;
}

Tip: Lowercase hex (#2563eb) diffs cleaner in Git than mixed case. Some linters enforce one style.

Converting design tokens

Design tools export #RRGGBB. If a brand guide lists RGB decimals, divide by 255 and convert to hex—or paste into DevTools, which accepts multiple formats.

RGB and RGBA

Functional notation maps directly to how designers talk about color:

.highlight {
  color: rgb(37, 99, 235);
  background: rgba(37, 99, 235, 0.15);
}

rgba() adds an alpha channel from 0 (transparent) to 1 (opaque). Modern syntax folds alpha into rgb():

background: rgb(37 99 235 / 0.15);

Spaces instead of commas are valid in CSS Color Module Level 4 and read well in design systems.

HSL and HSLA

HSL describes hue, saturation, lightness—often easier for programmatic palettes (darken/lighten without drifting hue).

.badge {
  color: hsl(220 90% 56%);
  box-shadow: 0 0 0 1px hsl(220 90% 40% / 0.4);
}

Hue is a degree on the color wheel (0–360). Saturation and lightness are percentages. Adjust lightness to build accessible hover states from one base hue.

Using colors in HTML attributes

Inline HTML still allows legacy attributes:

<font color="#333">Prefer CSS instead for new work</font>

Modern best practice is CSS classes or inline style with custom properties:

<article style="--accent: #0f766e; color: var(--accent);">
  Teal accent from a variable
</article>

CSS variables make theme switching (light/dark) straightforward:

:root {
  --text-primary: #111827;
  --surface: #ffffff;
}
[data-theme="dark"] {
  --text-primary: #f3f4f6;
  --surface: #111827;
}
body {
  color: var(--text-primary);
  background: var(--surface);
}

CurrentColor and system colors

currentColor inherits the computed text color—handy for icons:

svg.icon {
  fill: currentColor;
}

CSS also defines Canvas, ButtonText, and other system color keywords that respect user themes. Use them when building components that should align with OS accessibility settings.

Accessibility and contrast

Pretty palettes fail users when contrast is too low. WCAG recommends:

• 4.5:1 contrast for normal text
• 3:1 for large text (18px+ regular or 14px+ bold)

Check pairs with browser DevTools (Chrome’s color picker shows contrast ratios) or tools like the WebAIM contrast checker.

Do not rely on color alone to convey state—pair hue changes with icons, labels, or patterns.

Common mistakes

1. Using only #RGB shorthand incorrectly — #000 is black; #ccc is light gray, not “default gray text.”
2. Forgetting alpha on overlays — semi-transparent blacks (rgba(0,0,0,0.5)) behave better on varied backgrounds than opaque grays.
3. Hard-coding colors everywhere — centralize tokens (--color-brand-500) so rebrands do not require grep across 200 files.
4. Mixing hex in JS and CSS differently — if JavaScript reads CSS variables, keep one source of truth.

Working with gradients and modern color spaces

Linear gradients combine multiple color stops:

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Newer oklch() and color-mix() functions (supported in current evergreen browsers) produce perceptually uniform scales. They are worth learning once your baseline hex/RGB workflow is solid.

Quick reference table

FAQ

Why do my hex colors look different on two monitors?
Consumer displays vary in calibration and gamut. Test on multiple devices; sRGB is the web’s common denominator.

Can I use 8-digit hex in email HTML?
Support is inconsistent in older clients. Prefer solid colors or PNG backgrounds for critical marketing templates.

What is the difference between HTML color and CSS color?
HTML exposes a few presentation attributes; CSS is the authoritative styling layer. Always prefer CSS for maintainability.

How do I pick a accessible palette fast?
Start with one brand hue in HSL, fix lightness for text/background pairs that pass contrast, then generate accents by shifting hue ±30° with similar lightness.

Building a small palette from one brand hex

Suppose design gives you #7c3aed (violet). A practical workflow:

1. Convert to HSL mentally or with DevTools: roughly hsl(258 84% 58%).
2. Create --brand-600 for buttons at the base lightness.
3. Create --brand-700 by lowering lightness 8–10 points for hover.
4. Create --brand-100 by raising lightness above 90% for soft backgrounds.
5. Keep body text near #111827 on light surfaces—not pure #000, which feels harsh on LCDs.

Document tokens in one file:

:root {
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;
  --brand-100: #ede9fe;
  --text: #1f2937;
}
.card {
  background: var(--brand-100);
  color: var(--text);
  border-left: 4px solid var(--brand-600);
}

When stakeholders ask for “the same purple everywhere,” you point to variables—not fifty copies of #7c3aed with one-off tweaks.

Print and PDF considerations

Screens use RGB. Print workflows often expect CMYK, which browsers do not expose in CSS color literals. Export print stylesheets with simplified palettes or hand off brand CMYK values to design tools— do not assume hex on screen matches ink on paper without conversion.

For PDF generation from HTML (Puppeteer, wkhtmltopdf), embed fonts and test colors in grayscale preview to catch contrast issues early.

Color in SVG and canvas

SVG fills accept the same CSS color syntax:

<circle cx="50" cy="50" r="40" fill="#7c3aed" />

Inline SVG inside HTML can use currentColor so icons track text theme. Canvas 2D contexts use hex strings in fillStyle as well; remember to convert if you compute colors in JavaScript libraries that output RGB arrays.

---

HTML color codes look like trivia until a design system spans dozens of components. Standardize on hex or RGB tokens, document them once, and let CSS variables carry color through your app—your future self (and your designers) will thank you when the rebrand lands.