Skip to main content

CSS Colors: Complete Reference

CSS provides multiple color systems — from simple keywords to modern perceptual color spaces. Understanding them gives you full control over your design palette.

1. Named Colors (Keywords)​

CSS supports 140+ named color keywords. Best for quick prototyping, not production code.

h1 { color: tomato; }
section { background: aliceblue; }

Useful named colors grouped by tone:

WarmCoolNeutral
tomato, coral, salmonsteelblue, dodgerblue, royalbluegainsboro, silver, dimgray
orange, gold, khakimediumseagreen, teal, cadetbluewhitesmoke, ghostwhite

2. Hexadecimal (#RRGGBB)​

The most widely used system in web design. Each pair of hex digits (00–FF) represents Red, Green, Blue intensity.

/* Full 6-digit hex */
.primary { color: #6c63ff; }   /* R=108, G=99, B=255 */
.danger  { color: #e53e3e; }

/* 3-digit shorthand — #RGB expands to #RRGGBB */
.black   { color: #000; }  /* = #000000 */
.white   { color: #fff; }  /* = #ffffff */
.red     { color: #f00; }  /* = #ff0000 */

/* 8-digit hex with alpha (#RRGGBBAA) */
.overlay { background: #0000004d; } /* Black at ~30% opacity */

Hex Opacity Quick Reference​

Opacity %Hex Alpha
100%FF
90%E6
75%BF
50%80
25%40
10%1A
0%00

3. RGB and RGBA​

Functional notation using decimal values 0–255 per channel.

.red             { color: rgb(255, 0, 0); }
.semi-transparent { background: rgba(0, 0, 0, 0.5); } /* 50% black */

/* Modern space-separated syntax (CSS Color Level 4) */
.modern { color: rgb(255 0 0 / 50%); } /* Same as rgba(255, 0, 0, 0.5) */

4. HSL and HSLA​

Hue, Saturation, Lightness — the most intuitive system for designers. Much easier to tweak than hex.

hsl(hue, saturation%, lightness%)
  • Hue: Angle on the color wheel 0°–360° (0=Red, 120=Green, 240=Blue).
  • Saturation: 0% = gray, 100% = fully vivid.
  • Lightness: 0% = black, 50% = normal color, 100% = white.
.primary        { color: hsl(245, 100%, 70%); }   /* Vivid purple */
.primary-dark   { color: hsl(245, 100%, 55%); }   /* Darker — just lower L */
.primary-light  { color: hsl(245, 100%, 85%); }   /* Lighter — raise L */
.primary-muted  { color: hsl(245, 30%, 70%); }    /* Muted — lower S */
.primary-alpha  { color: hsla(245, 100%, 70%, 0.3); }  /* Semi-transparent */

Creating Palette Variants with HSL​

:root {
  --hue: 245;
  --brand:       hsl(var(--hue), 80%, 60%);
  --brand-dark:  hsl(var(--hue), 80%, 45%);
  --brand-light: hsl(var(--hue), 80%, 75%);
  --brand-pale:  hsl(var(--hue), 40%, 92%);
}

5. Modern Color: OKLCH​

oklch() is the newest addition to CSS and is increasingly considered the best choice for accessible, perceptually uniform color systems. It uses the OKLCH color space which maps much more naturally to how humans perceive brightness.

/* oklch(Lightness Chroma Hue) */
.primary { color: oklch(60% 0.2 265); }   /* Vivid purple-blue */
.light   { color: oklch(90% 0.05 265); }  /* Same hue, much lighter */
.dark    { color: oklch(35% 0.2 265); }   /* Same hue, much darker */

Why OKLCH beats HSL:

  • Changing Lightness alone doesn't shift perceived hue (HSL has this problem with blue).
  • Works with wide color gamut displays (P3, Rec2020).
  • Better for automated palette generation (AI-assisted design).

6. CSS Color Keywords for Transparency​

color: transparent;              /* Fully see-through */
color: currentColor;             /* Inherits the element's current text color */
border: 1px solid currentColor;  /* Border matches text color automatically */

7. Color in CSS Variables (Design Token System)​

:root {
  /* Base palette */
  --hue-brand: 245;
  --color-primary:     hsl(var(--hue-brand), 80%, 60%);
  --color-primary-rgb: 108, 99, 255; /* For rgba() usage */

  /* Semantic tokens */
  --color-bg:      #0f0f0f;
  --color-surface: #1c1c1e;
  --color-text:    #f0f0f0;
  --color-muted:   #888888;
  --color-border:  rgba(255, 255, 255, 0.08);
  --color-danger:  hsl(0, 75%, 55%);
  --color-success: hsl(142, 70%, 45%);
  --color-warning: hsl(40, 95%, 55%);
}

/* Using rgb() helper for opacity without rgba() */
.hero-overlay {
  background: rgb(var(--color-primary-rgb) / 0.15);
}

8. Accessibility: Color Contrast​

The WCAG 2.1 standard requires:

  • Normal text: 4.5:1 contrast ratio minimum.
  • Large text (18pt+ or 14pt bold): 3:1 minimum.
  • UI components: 3:1 minimum.

Tools:

/* ❌ Fails WCAG AA (too low contrast) */
.text { color: #888; background: #aaa; }

/* ✅ Passes WCAG AA */
.text { color: #111; background: #fff; }