CSS Custom Properties for Color: The Complete Practical Guide

CSS custom properties (often called CSS variables) are the modern foundation for color management on the web. They provide a single source of truth for color values, enable runtime theme switching (dark mode), and require no build tools or preprocessors.

Basic Setup

:root {
  --color-primary: #4f46e5;
  --color-supporting: #0d9488;
  --color-light-base: #f8f9fb;
  --color-dark-base: #1a1a2e;
}

.button { background: var(--color-primary); }
.card { background: var(--color-light-base); }

Naming Conventions

Use a consistent prefix to namespace your color variables. PaletteRx Export Guide: Every Format Explained">PaletteRx exports use --color- as the prefix. Some teams prefer --c- for brevity or --palette- for clarity. Whatever you choose, be consistent. Name by role, not by visual appearance: --color-primary not --color-blue.

Scope and Inheritance

Variables defined on :root are globally available. Variables defined on a specific selector are scoped to that element and its children. This enables component-level overrides: a dark section can redefine --color-text for its children without affecting the rest of the page.

Fallback Values

Always provide fallbacks for critical colors: color: var(--color-text, #1a1a2e). The fallback activates if the variable is undefined (missing import, typo, different context). This prevents invisible text or broken layouts when variables fail.

Dark Mode Switching

Redefine variables in a dark mode context (media query or data attribute) and every element using those variables updates automatically. This is the most powerful feature: one set of component CSS, two color definitions, zero JavaScript needed for the color switch itself.