CSS Reference

CSS Color Formats

Complete guide to CSS color formats — HEX, RGB, HSL, OKLCH, named colors, transparency, and color-mix().

On this page

#Overview
#Syntax
#Values
#Examples
#Common Patterns
#Tips & Best Practices
#Browser Support
#FAQ

Overview

CSS supports many color formats, each with different strengths. Hexadecimal (#RRGGBB) is compact and widely used. RGB (rgb(R, G, B)) maps directly to screen output. HSL (hsl(H, S%, L%)) is intuitive for creating palettes. Newer formats like OKLCH provide perceptually uniform color manipulation. Understanding when to use each format helps create accessible, maintainable design systems.

Syntax

color: <color-value>

Values & Keywords

Hex

#RRGGBB or #RGB (short). 8-digit for alpha: #RRGGBBAA. Example: #ff6600.

rgb()

rgb(255, 102, 0) or modern syntax rgb(255 102 0). Range: 0-255 per channel.

hsl()

hsl(24, 100%, 50%). Hue: 0-360 degrees, Saturation: 0-100%, Lightness: 0-100%.

oklch()

oklch(0.7 0.15 50). Perceptually uniform — consistent lightness perception.

Named colors

148 named colors: tomato, coral, slateblue, transparent, etc.

color-mix()

color-mix(in srgb, #ff0000 50%, #0000ff). Blends two colors in a given color space.

currentColor

Inherits the current color property value. Useful for SVG icons and borders.

Practical Examples

HSL palette generation

HSL makes it easy to create a consistent palette — keep the same hue, then vary saturation and lightness for tints (lighter) and shades (darker).

:root {
  --brand-50:  hsl(220, 90%, 96%);
  --brand-100: hsl(220, 90%, 90%);
  --brand-200: hsl(220, 85%, 80%);
  --brand-500: hsl(220, 80%, 50%);
  --brand-700: hsl(220, 75%, 35%);
  --brand-900: hsl(220, 70%, 15%);
}

Semi-transparent overlays

The modern space-separated syntax with / alpha creates transparent overlays. No need for rgba() — any color function supports the / alpha form.

.overlay {
  background: hsl(0 0% 0% / 0.5);
}

.frosted-glass {
  background: rgb(255 255 255 / 0.1);
  backdrop-filter: blur(12px);
}

OKLCH color scale

OKLCH produces perceptually uniform scales where each step looks equally different to the human eye — unlike HSL where lightness perception varies by hue.

:root {
  --blue-100: oklch(0.95 0.03 250);
  --blue-300: oklch(0.80 0.10 250);
  --blue-500: oklch(0.60 0.18 250);
  --blue-700: oklch(0.45 0.15 250);
  --blue-900: oklch(0.25 0.08 250);
}

Theme-aware colors with color-mix()

color-mix() lets you create tints and shades programmatically in CSS — no preprocessor needed. Mix with white for tints, black for shades.

:root {
  --brand: #3b82f6;
  --brand-light: color-mix(in srgb, var(--brand) 30%, white);
  --brand-dark: color-mix(in srgb, var(--brand) 70%, black);
  --brand-hover: color-mix(in oklch, var(--brand) 85%, black);
}

Try it visually

Use our interactive color generator to experiment with values and see the result in real-time. Copy production-ready CSS, cross-browser CSS, or Tailwind classes with one click.

Open CSS Color Formats Tool

Common Patterns

Dark/light theme with custom properties

Define color tokens as CSS custom properties and swap them based on a class or media query. This approach is simple, performant, and requires no JavaScript.

:root {
  --bg: #ffffff;
  --text: #1a1a2e;
  --muted: #6b7280;
  --border: #e5e7eb;
}

[data-theme="dark"] {
  --bg: #0f172a;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --border: #334155;
}

body {
  background: var(--bg);
  color: var(--text);
}

Accessible color palette with relative colors

Use relative color syntax to generate accessible hover/focus states from a single base color.

.button {
  --base: oklch(0.6 0.2 250);
  background: var(--base);
  color: white;
}

.button:hover {
  background: oklch(from var(--base) calc(l - 0.1) c h);
}

.button:active {
  background: oklch(from var(--base) calc(l - 0.2) c h);
}

Programmatic tints with color-mix()

Generate an entire tint scale from one base color using color-mix(). No Sass, no build step required.

:root {
  --brand: #3b82f6;
  --brand-50:  color-mix(in oklch, var(--brand) 5%, white);
  --brand-100: color-mix(in oklch, var(--brand) 15%, white);
  --brand-200: color-mix(in oklch, var(--brand) 30%, white);
  --brand-500: var(--brand);
  --brand-800: color-mix(in oklch, var(--brand) 70%, black);
  --brand-950: color-mix(in oklch, var(--brand) 90%, black);
}

Tips & Best Practices

1
Use HSL for design tokens and palette creation — adjusting lightness creates consistent tints and shades, and the hue value (0-360) is intuitive to reason about.
2
Always check contrast ratios for accessibility. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. Use tools like the browser DevTools contrast checker.
3
Use currentColor for icons, borders, and shadows to automatically inherit the text color — this makes components theme-aware without extra CSS.
4
OKLCH produces more uniform color ramps than HSL. In HSL, pure blue (240) appears much darker than pure yellow (60) at the same lightness value.
5
Prefer the modern space-separated syntax: rgb(255 102 0 / 0.5) instead of rgba(255, 102, 0, 0.5). It is more readable and works consistently across all color functions.

Browser Support

HEX, RGB, HSL: universal. OKLCH: Chrome 111+, Firefox 113+, Safari 15.4+. color-mix(): Chrome 111+, Firefox 113+, Safari 16.2+.

Related CSS Guides

background-image (gradients)

CSS Gradients

Complete guide to CSS gradients — linear-gradient, radial-gradient, conic-gradient syntax, color stops, and advanced patterns.

CSS Color Formats — FAQ

Common questions about color and how to use it effectively.

Which color format should I use?

Use HSL for design tokens and palette creation (easy to adjust lightness/saturation). Use HEX for static values in code. Use OKLCH if you need perceptually uniform scales. Use color-mix() for programmatic tints without a preprocessor.

How do I add transparency to a color?

Use the / alpha syntax: rgb(255 0 0 / 0.5), hsl(0 100% 50% / 0.5), or 8-digit hex: #ff000080. The / alpha form works with all modern color functions including oklch().

What is currentColor?

A keyword that resolves to the element's computed color property. Useful for making borders, shadows, and SVGs inherit the text color automatically — reducing the number of properties to maintain.

What is the difference between OKLCH and HSL?

HSL is based on the sRGB color model and is not perceptually uniform — hsl(60, 100%, 50%) (yellow) appears much lighter than hsl(240, 100%, 50%) (blue) at the same lightness. OKLCH uses a perceptually uniform color space where equal lightness values look equally bright to human eyes.

How do I create a color palette from a single brand color?

Use color-mix() in CSS: mix your brand color with white (for tints) and black (for shades) at varying percentages. For better results, use "in oklch" as the color space for perceptually uniform steps.