The right color can enhance the personality of a brand, it can help website visitors instantly understand which button to press. It can be the difference between a friendly message and an aggressive one or the difference between an unusable interface, and an intuitive one.
Color is one of the most important tools in a designer's toolkit. So here is a roundup of some of our favourite tools and resources for designing brands and websites.
1. Contrast Checker
When it comes to building a website, it's essential to make sure elements like buttons have enough contrast that visitors with any form of color blindness, or visual impairment can still easily use them. The same goes for text and messaging. While Webflow has a handy built in tool to check everything is accessible, color selection happens much earlier than the build stage.
There are a lot of contrast check tools out there, and this one is kinda ugly, but it is simple and does the job in a streamlined way that doesn't try to be too fancy, so it is quick to use. Which is super handy when testing out potential color schemes.
On the topic of accessibility, this Chrome plugin called Spectrum is super handy for checking your already live site for compatibility with different types of color vision deficiency.
2. Color palette generation
Coolors lets you save palettes, test out color transitions and gradients, and browse pre-made libraries. You can really easily switch our individual colors too, which makes developing a palette a smooth process. There are a lot of different tools for generating color palettes, but this one is the one we always go back to.
3. The meaning of colors
There is a lot of theory and psychology behind color use. Green is good, red means danger, purple is royal etc. I think color choice comes intuitively to most people, not just designers, it's kind of just something you know, if a color isn't quite right. But it is always good to remind ourselves of the science behind the theory. This rundown by Webflow is perfect for doing just that.