CSS Colors, Variables, and Custom Properties

What is it?

CSS custom properties store reusable values — colours, sizes, spacing — in one place. Changing a variable updates every element that uses it. Combined with color schemes, they power dark mode and theming.

Why does it matter?

Design systems require consistent colours and spacing. Without CSS variables, changing the primary colour means finding and replacing it in hundreds of places. Variables make design changes instant and systematic.

Learn CSS color formats (hex, rgb, hsl), CSS custom properties, color schemes, and building a theme system.

Real-World Use Cases

🎨 Brand colour system - Define --primary, --secondary, --accent once; use them throughout — change the brand colour in one line.
🌙 Dark mode toggle - CSS variables on :root change when a .dark class is added to body — instant theme switch.
📏 Consistent spacing scale - Define --spacing-xs through --spacing-2xl and use them for all padding and margin.
🔲 Component theming - Card reads --card-bg from variables — parent changes the theme, card adapts automatically.

CSS Color Formats

/* Hex */
color: #6366f1;       /* 6-digit */
color: #6366f1cc;     /* 8-digit: last 2 = opacity */

/* RGB and RGBA */
color: rgb(99, 102, 241);
color: rgba(99, 102, 241, 0.8);

/* HSL — most intuitive for adjusting */
color: hsl(239, 84%, 67%);         /* indigo */
color: hsl(239, 84%, 57%);         /* darker */
color: hsl(239, 84%, 77%);         /* lighter */

CSS Custom Properties

:root {
    --primary:    #6366f1;
    --success:    #10b981;
    --danger:     #ef4444;
    --text:       #1e293b;
    --bg:         #ffffff;
    --card-bg:    #f8fafc;
    --border:     #e2e8f0;
    --space-2:    8px;
    --space-4:    16px;
    --space-6:    24px;
    --radius:     8px;
}
.btn-primary {
    background: var(--primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
}

Dark Mode with CSS Variables

:root {
    --bg:      #ffffff;
    --text:    #1e293b;
    --card-bg: #f8fafc;
}

/* System dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:      #0f172a;
        --text:    #f1f5f9;
        --card-bg: #1e293b;
    }
}

/* Manual toggle with .dark class on html */
html.dark {
    --bg:      #0f172a;
    --text:    #f1f5f9;
    --card-bg: #1e293b;
}

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

Q: What is the difference between CSS variables and Sass variables?

CSS custom properties are live in the browser — changed at runtime with JavaScript, scoped to elements, work with media queries. Sass variables are compile-time only — replaced during build, cannot be changed dynamically. Use CSS custom properties for theming; use Sass variables for build-time constants like breakpoints.

Quick Access

CSS Color Formats

CSS Custom Properties

Dark Mode with CSS Variables

Related Posts

Comments (0)

Leave a Comment