How to suck less at using colors

Colors are a pretty fundamental part of building anything for the web and one of the most important parts of a coherent design. If done right it can contribute to brand recognition and generally convey a certain feeling people have when interacting with sites / products. Colors are also important to get right because they can make your design inaccessible to a large number of people with disabilities or just bad eyes. 👵

A lot of times developers underestimate their knowledge about colors. Usually we've already encountered many concepts around colors in school when we were still young and just forgot about them or didn't connect the dots to apply them to designing yet.

Let's jump in and look at some of the basic concepts!

Color Harmonies

This is one of those concepts you've probably heard of before. In fact you might know a few color harmonies like monochromatic, complementary, analogous. It's a great starting point, because color harmonies help pairing colors together in a proven way that will look good.

Color harmonies basically describe the position colors have to each other on the color wheel. Analogous colors for example are located right next to each other, while complementary colors are opposite, canceling each other out. Most design tools already have ways that allow you to play with color harmonies.

image

Let's say you have picked a brand color (orange: #ED8B3D) and are now looking for colors to match with it. Color harmonies to the rescue. Here's a handy tool that allows us to try out different color harmonies and a look at monochromatic and analogous colors already gives us a nice palette of matching colors, sweet! Of course you don't have to stop there and can absolutely tweak the analogous colors as desired. However if you're kinda lost and need a place to start, color harmonies are always worth considering.

Neutral colors

You can think of neutral colors as a sidekick to your primary color – your hero. The cool thing about neutral colors is – drumroll – their neutrality, which means you can't really tell what the underlying color is. They usually make your primary color stand out and are themselves soft and less visible, which helps put emphasis on your primary color(s).

Depending on how many colors you're already using and whether you're using a lot of whitespace or not, it can be a good idea to use graphic elements with neutral colors purely to fill space without it all being whitespace.

Less colors

One of the most common mistakes when using colors, is using too many colors at once. Sometimes this happens over time and you end up with six different shades of blue, sometimes people don't give their colors enough thought. Often this makes it harder, because there is no way to make all those different colors play nice together.

You can think of it like cooking. You'd never use all the spices in a single dish but instead only use those few that can actually help improve the taste of a dish. Oftentimes using less colors but using them consistently, is the way to go.

When you're wondering which colors to choose it makes sense to think about what kind of feeling you want to evoke in people looking at your website or app. Start with two colors and decide on a base trait, like reliable, fun, bold, minimal and try adding more colors slowly while keeping up those overall feelings. If a color doesn't fit the overall impression you want to achieve, don't use it.

Contrast

Contrast is extremely important, especially a color's lightness. It will determine how accessible your design is and how quickly people can gather actual information from your copy. Worst case, it will determine if people can read your message at all or if something in your design is completely illegible or invisible, making for a frustrating experience.

A general rule of thumb is, when it works in greyscale, it will also be legible in color. However there are cases where you want to make sure that what you're designing is actually accessible to everybody. A really handy tool (which costs little money) is the Mac app call contrast. It lets you pick two colors and calculates a legibility score, which allows you to reliably choose colors with a contrast high enough for everybody to read.

Contrast, if used incorrectly can however also contribute to a less balanced layout, because different colors can clash to hard. So you should always keep the overall harmony in ind as well when going for contrasting colors.

Color is subjective

Lastly, color is a very subjective topic and you should probably not listen too closely to any random article on the internet. 😅 Different people perceive colors differently and there is no exact way of getting this right. At the same time that's the reason why sticking to those general guidelines provided above can be really helpful!

design
colors