Comprehensive guide for color usage in web design

  • Color terminology
  • Color rules
  • How to build and apply a color palette in web design
  • Useful tools and resources

Getting started

So, you have a web design project on your hands. One of the first steps you’ll probably have to take in order to kickstart the process is choosing a color palette. If you’re working for an existing brand, then probably your color scope will be limited, especially if this company has a brand guideline. However, if so far you only have a black and white sketch of a brand, waiting for definitions such as color, then keep reading.

Color psychology

When you finish with this mini-workshop you should have in your hands a list of consensual attributes. Your aim is to get the brand to evoke these attributes. For that, a very strong tool is color psychology. You shouldn’t define a brand’s color just because you (or someone else) likes it. Whichever color you use will surely have an impact on your audience. There is a lot to be said about audiences, enough to cover it in a separate post. For now, let’s just say that your audience matters and that you should design specifically for it.

  • Orange: Energy, vitality, autumn.
  • Yellow: Warning, happiness, cowardice, or wealth, in a golden shade.
  • Pink: Femininity, romance, sensitivity. Could also convey energy and innovation.
  • Purple: Royalty, luxury, creativity, spirituality.
  • Blue: Sadness, calm, reliability, trust, corporate.
  • Green: Nature, luck, cleanliness (depending on the shade).
  • Grey: Conservative, modernity, luxury.
  • Black: Elegance, power, strength.
  • White: Purity, cleanliness, elegance.

Color terminology

Let’s speak properly. If we are going to work with color, we should know how to speak about it, and because of that, how to manipulate it to fit our design needs. Let’s get acquainted with a couple of terms:

  • Saturation/Chroma: This refers to the purity of a color. A color is most pure when it lacks gray.
  • Value: Refers to the lightness or darkness of a color.
  • Shade: When you add black (lower the value) of a color or hue.
  • Tint: When you add white (increase the value) of a color or hue.

Creating a color palette

So, a quick recap. Until now you have:

  1. Selected a color to reflect these attributes, through the use of color psychology.
  2. Determined a more specific “version” (tone, shade or tint) of your color, through your knowledge of the Munsell Sphere.

Complementary colors

These are colors that are located at opposing sides of the Chromatic Circle.

Analogous colors

These are colors that are next to each other on the Chromatic Circle.

Triadic colors

These are colors obtained by overlapping an equilateral triangle to the Chromatic Circle.

Split-complementary colors

This combination is obtained by matching the main color to the two colors adjacent to its complementary.

Square colors

These are colors obtained by overlapping a square to the Chromatic Circle.

More combinations

The same as with the triadic and square color combinations, you can create even larger palettes by using other geometrical figures such as pentagon, or a hexagon.

Tip: Beware of color vibration

When you create a palette, especially a complementary palette, it’s not only necessary to define the hues. You also need to take into account the saturation/chroma and the value of your colors, in order to get a harmonious palette. Otherwise, you risk your colors vibrating. Literally.

Applying colors in web design

Now that we have one central color and some notions about color rules, we can choose a strategy and define our color palette for our website design. Let’s start from the beginning.

How many colors?

The truth is you can have as many colors as you like, but you should keep in mind that larger color palettes are harder to implement effectively. It may also affect the ability to have a consistent design system in place. However, it’s your choice. I would personally recommend having a simple color palette, especially if you’re just starting.

Which colors should my palette include?

To start, your palette should include a very light color and a very dark color. The idea is that these two colors have a great contrast (I will leave tools to measure contrast at the end of the article). For example, black and white (yes, white counts as a color). Why? Because you will need a color for backgrounds and a color for text. Just that simple. Personally, I prefer choosing neutral colors for this. Neutral colors are versatile and elegant and can compliment any given color palette.

The finished color palette

Let’s say that in total we’re going to have 5 colors in our palette. We already know that one color should be really light (e.g. white) and another color should be very dark (e.g. black). That leaves us three open spots for some interesting colors. We also know that we have the main color and that the other two colors will relate to this main color through the use of color rules.

How should I apply these colors to my design?

Of course, there are no set rules, and different designers might obtain very different results using the same colors, fonts and so on. This is only meant as a guide for getting started. In other words, if you have no clue whatsoever on what to do with your new color palette.

How can we apply it?

  • White: can be used as a base/background color. Of course, you can use other light neutrals (like gray) for some backgrounds, or even a bright color from your palette, but in general, for legibility sake, you should probably have more white real estate in place.
  • Black: Can be used for text. Again, you can have quotes or highlighted text in another color.
  • Light blue: Pick a color that is very different from the text color but has a good contrast with the main background color. In this case, that color would be the light blue. This color will be perfect for hyperlinks. You want links to be distinguishable from your text, but readable.
  • Blue: This is your main color, so it will probably set the tone for your design. You will probably use it for some backgrounds, buttons, graphs and so on.
  • Orange: This would be your accent color. You could use it to add a touch of color to your design. Could be used on some buttons, miscellanea, icons, and graphs.

Ok, but what about consistency?

I like rules. Rules for me are what separate designing with a rationale/objective/justification from designing just what you feel like. So, when I was starting I would look for rules to use color. For example:

  • Should all clickable elements look the same?
  • Should all clickable elements have the same color?
  • A style guide
  • Symbols in your design software (e.g. Sketch symbols). So whenever you need an element, you don’t create it from scratch, you just use an existing symbol. If you make a change on a symbol, this change will reflect on all instances of the symbol.

Practical uses of color

Color is not only meant to make your design attractive. It is also used to convey meaning. For example:

  • You can implement color coding (e.g. all content of X topic will have X color).
  • You can show status (green could mean active, red inactive and so on).

More complex palettes

Like we said before, you can have more complex palettes, with more colors. For example a square palette, or an analogous palette with a higher number of colors. It can work out perfectly, but as always, the decision to use more colors should be based on things like the objective of your website and its target audience. Let’s look at a couple of examples:

Slack

Stripe

Tools and resources

You’ve reached the end of this article, congratulations! (and thank you for reading). I hope you found this article helpful. We’ve covered a lot of ground, but in a summarized way (yes, it could have been longer).

Choosing colors

Check contrast

Color-blindness

  • ColorOracle: With one click see what people with common color vision impairments will see.

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Agustina Feijóo

Written by

UX Designer currently based in Argentina, working remotely for the world. - www.uxagustina.com

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead