I’m still figuring our a sane color management strategy, but my top tip I’ve picked up along the way would have to be:
// Dark values $black = #272B37 $navy = #333847 $slate = #5D6478 $pewter = #737A8D // Light values $soft-gray = #F7F8FA $soft-slate = #E3EBF3 $soft-green = #C6ECE7 $soft-blue = #F8FBFE
I’ve tried various naming conventions, (e.g.
$offwhite-2, etc.) but pre-fixing descriptive names has proven my favorite so far, especially when combined with…
border 1px solid alpha( $slate, 30% )
I usually derive a color palette by manipulating the opacity of existing colors (in Photoshop, Sketch, etc.), so color functions seem to be a natural fit.
Taking It Further
It’s still a little wonky. Sometimes I find color function combinations that explode when their root color changes, and nesting color functions makes seems to make CSS less scannable.
Has anyone picked up some good CSS color palette management practices?