CSS Color Tools

Why use CSS color variables?

Custom properties let you define a color once and use it everywhere. When the color needs to change — for a rebrand, a theme, or a subtle adjustment — you change one value instead of hundreds.

Building a theme system

A simple theme system uses two layers:

1. Primitive tokens

   Raw color values such as --color-blue-500. These never change between themes.
2. Semantic tokens

   Role-based names such as --color-primary, --color-background or --color-text. These are the variables your components use, and they are what themes override.

With this structure, switching themes is a matter of overriding semantic tokens under a [data-theme="dark"] selector — no component changes required.

Practical examples

:root {
  --color-primary: #4f46e5;
  --color-secondary: #0ea5e9;
  --color-background: #ffffff;
  --color-text: #111827;
}

[data-theme="dark"] {
  --color-background: #0b0f17;
  --color-text: #f1f5f9;
}

.button {
  background-color: var(--color-primary);
  color: white;
}

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

Frequently asked questions

Related tools