How to turn a color palette into clean CSS variables

Picking colors is the fun part. Wiring them into a codebase that stays
maintainable is where most palettes fall apart. Here's the approach I use.

1. Name colors by role, not value

Don't scatter hex codes everywhere:

css
.button { background: #6366f1; }
.link   { color: #6366f1; }
Define them once as custom properties, referenced by role:


:root {
  --color-bg:      #f7f7f8;
  --color-surface: #ffffff;
  --color-text:    #1f2937;
  --color-muted:   #9ca3af;
  --color-accent:  #6366f1;
}

.button { background: var(--color-accent); }
.link   { color: var(--color-accent); }
Now re-theming the whole app is a few edits in one place.

2. Skip pure black and pure white
#000 on #fff feels harsh on screens. Pull both back:


--color-text: #1f2937; /* near-black */
--color-bg:   #f7f7f8; /* off-white  */
Most layouts instantly look more intentional.

3. Dark mode is almost free
Because the colors are role-based variables, you just override the values:


@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:      #0f1115;
    --color-surface: #1a1d24;
    --color-text:    #e5e7eb;
  }
}
Every component using var(--color-bg) adapts automatically.

A shortcut
I got tired of hand-converting palettes into this, so I built a free tool,
PaletteCSS, that copies any palette straight out as
CSS variables, Tailwind or SCSS — and has a color palette generator
if you need a starting point. But honestly, the three rules above matter more
than any tool.

What conventions do you use to keep a color system maintainable?
PaletteCSS — a free tool to discover, create and share color palettes and CSS
gradients. Copy any palette as hex, CSS variables, Tailwind or SCSS. No signup.
https://palettecss.com**