Web Color Formats: Complete Guide to Every CSS Color Syntax

Published November 2026 · 7 minute read

CSS has evolved from two color syntaxes to more than a dozen. This guide covers every format you can use on the web today, with examples and recommendations.

1. Named Colors

The 148 CSS named colors — the classic sixteen plus 132 more.

color: red;
color: coral;
color: rebeccapurple;

Best for: Prototypes, teaching, quick mockups. Not recommended for production because the actual color value is easy to forget.

2. HEX (6-digit)

color: #155EEF;

Best for: Brand colors, general CSS, the most common format in production.

3. HEX (3-digit)

color: #0AF; /* same as #00AAFF */

Best for: Rare. Limited to 4,096 colors; often confused with precision.

4. HEX (8-digit)

color: #155EEF80; /* 50% alpha */

Best for: Transparency with compact syntax. Supported in all modern browsers.

5. RGB

color: rgb(21, 94, 239);

Best for: JavaScript, canvas, dynamic color manipulation. Also useful in CSS when values are computed.

6. RGBA

color: rgba(21, 94, 239, 0.5);

Best for: Transparency with wider browser support than 8-digit HEX.

7. HSL

color: hsl(215, 84%, 51%);

Best for: Design systems, palette generation, theming. Most intuitive for adjusting colors.

8. HSLA

color: hsla(215, 84%, 51%, 0.5);

Best for: HSL with transparency.

9. Modern HSL / RGB (space-separated)

color: hsl(215 84% 51%);
color: hsl(215 84% 51% / 0.5);
color: rgb(21 94 239);
color: rgb(21 94 239 / 0.5);

Best for: New projects. Cleaner syntax but not supported in very old browsers.

10. color() Function

color: color(display-p3 0.082 0.369 0.937);

Best for: Wide-gamut displays (Apple, modern phones). Allows colors outside sRGB.

11. OKLCH (Emerging)

color: oklch(0.55 0.24 260);

Best for: Modern CSS, perceptually uniform palettes. Browser support growing; not yet universal.

12. currentColor

border: 1px solid currentColor;

Best for: Elements that should inherit the parent's text color — icons, borders, SVGs.

13. transparent

background: transparent;

Best for: Fully transparent elements. Equivalent to rgba(0, 0, 0, 0).

Which Format Should You Use?

For brand colors

HEX — universally recognized, easy to share and remember.

For design systems

HSL — intuitive to adjust, easy to generate shades.

For transparency

RGBA or 8-digit HEX — both work well. RGBA has slightly wider support; HEX8 is more compact.

For JavaScript

RGB — direct channel manipulation is easiest.

For wide-gamut display

color(display-p3 ...) or OKLCH — with fallback to sRGB for older browsers.

Browser Support Summary

  • All formats (HEX, RGB, HSL, named colors) — Supported in every browser since 2010
  • RGBA/HSLA — Supported since 2010
  • 8-digit HEX — Chrome 62+, Firefox 49+, Safari 10+
  • Modern space-separated — Chrome 65+, Firefox 52+, Safari 12.1+
  • color(display-p3 ...) — Chrome 111+, Safari 15+
  • OKLCH — Chrome 111+, Safari 15.4+, Firefox 113+

Recommendations

  • Production web: HEX for brand colors, HSL for design systems
  • Modern projects: Use modern space-separated syntax for cleaner code
  • Cross-browser safety: Stick to HEX, RGB, HSL, RGBA, HSLA
  • Wide-gamut: Add color() with sRGB fallback

Try It

Frequently Asked Questions