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**