Only defining a few "base colors" and letting color-mix() do the rest?
After being out of the CSS game for a while, I recently started working on a smol personal website and am playing around with some fancy newish css features.
I'm looking to make coloring my website more clean and scalable by heavily utilizing light-dark() and color-mix().
My idea was to only define a few base colors and then automatically generate derivatives, e.g.:
:root {
--color-accent: light-dark(#3dccb1, #39CFB3);
--color-bg: light-dark(#e5efec, #121212);
--color-accent-muted: color-mix(in srgb, var(--color-accent) 50%, var(--color-bg) 50%);
--color-bg-elevated: color-mix(in srgb, var(--color-bg) 90%, light-dark(#000, #fff) 10%);
}
Is this a decent practice at all or just a stupid idea?
Are there any websites/frameworks/concepts out there that do this, that I can have a look at?
How many and what kind of base colors do you think are needed to be able to generate derivates for any given purpose from them?