If I’m left to my own devices, I end up with something along the lines of $clr-grey-dark-but-darker-still, and then question if I’ve made the right career choices.
The best method I’ve found to name colour palettes is to use the Name that Color online tool.
This tool will generate colour names for you based on a HEX value.
Suddenly #254E70 becomes astronaut.
Big ups to Chirag Mehta, the developer who created this!So it’s not long until the above palette looks like this in code.
Before we all go home to celebrate and begin applying our fantastic new astronaut colour everywhere, there are a some things we should consider first…Call out common coloursEvery application will have common colours for functionality.
Font colours, border colours, and the like.
We may even want to call out a couple of the colours as primary and secondary.
Anything to help us out, and stop us repeating ourselves.
I generally prefix these with something unique so that I can easily spot them.
These are our common functional colours.
They describe what they are going to be used for.
The benefit these variables bring is that we can change things like the border colour in one place rather than in hundreds of places, and you start to familiarise yourself with the variables when looking through your styles.
Component coloursI’m currently working on a large component library, and it just feels cleaner to never reference a palette or functional colour directly in the component classes.
A couple of reasons for this, it means that I can have more explicit control over my colour usage.
We won’t be able to cover all colours in the functional section, so then you start to second guess at what level the colour declaration lives.
Also if my component is a complex one, I may well have colours in there that are repeated for similar classes.
So that should be a variable, right?So it feels cleaner to define all the component colours variables in a block, and then reference those colours within the component itself.
This might sound like a lot of overhead, but I can assure you, it will pay off in the long run.
After all that, you will end up with something that looks like the following:ConclusionI think it’s safe to say that there are no silver bullets when it comes to this stuff.
There are caveats to the above approach, but with anything there’s a cost benefit analysis to consider, and for me the benefits are so far outweighing the negatives.
If there’s anything to take away from this, it’s that it pays to have rules and to follow them.
Know where your colours are defined, live off a palette, and prefix where it helps.
And for goodness sake, don’t name your kids after someone you don’t like.
.