Comprehensive guide for color usage in web design

Agustina Feijóo
Jul 24, 2017 · 10 min read
Image for post
Image for post

There is a lot of material about color to be found online. But none of us has the time to search and read lengthy series of articles to cover the topic. That’s why I wanted to create this comprehensive guide for applying color in web design. In this post we’ll cover:

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

Getting started

The first thing I recommend doing is performing a small exercise with your client or the project’s stakeholders. The exercise consists in having these stakeholders write a short list of attributes that they believe their new brand should have. If you can be on-site for the exercise (I personally work remotely from Argentina for clients in Europe and the US), then have them write each attribute on a sticky note. Then gather all sticky notes and put them on a whiteboard. Soon, you’ll start noticing patterns. Pick up and reorganize the sticky notes so as to cluster the notes that relate to one another. Then, you can name each cluster. In this case, since this is a small exercise, the name would probably be a single word that comprises all those related attributes. In other words, a consensual attribute.

Color psychology

Back to color psychology. To summarize, color affects people and evokes certain ideas/attributes. The way we relate ideas to colors depends on our culture. Different cultures have different color interpretations (see, I told you the audience matters). There is material to be found on color psychology for many countries/areas of the world. Here is a resource I found.

In this post, we’ll cover western color interpretations:

  • Red: Love, danger, anger, war. A darker red could be related to elegance.
  • 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.

It is important to note that the shade of the color will also affect its interpretations. But then again, not only the “shade”.

Color terminology

  • Hue: This is the color.
  • 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.

With these three parameters, we can create many “versions” of a color. To better explain it, let’s look at the Munsell Sphere:

Image for post
Image for post

The “versions” I was referring to earlier actually have names. Yes, more color terminology to learn!

  • Tone: When you add gray (desaturate) a color or hue.
  • 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

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

Great! Now, it’s time to build a color palette for your website. To do that, we’ll take your brand’s new color as the central color to base your palette on. The next step is to choose some colors to accompany your main color, and therefore, create your palette. In order to do it, there are several color rules that you can choose from and apply. These rules are built upon the Chromatic Circle or Color Wheel, a very useful tool to create color combinations.

Image for post
Image for post

Complementary colors

Image for post
Image for post

Analogous colors

Image for post
Image for post

Triadic colors

Image for post
Image for post

Split-complementary colors

Image for post
Image for post

Square colors

Image for post
Image for post

More combinations

Tip: Beware of color vibration

There are some colors, that when placed next to each other, produce a disturbing effect on our eyes. They seem to vibrate. This happens especially with colors that at opposite in the Chromatic Circle, and that have the same level of saturation.

Image for post
Image for post
Image for post
Image for post

Applying colors in web design

How many colors?

Which colors should my palette include?

Bottom line, your color palette shouldn’t only include very live and interesting colors. You need base colors too.

The finished color palette

Let’s pretend our main color is blue. Here are some possible palettes with blue as the main color.

Complementary palette

Image for post
Image for post

Analogous palette

Image for post
Image for post

Triadic palette

Image for post
Image for post

How should I apply these colors to my design?

Let’s continue with our made up palette. Suppose we chose to use the complementary palette.

How can we apply it?

  • 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?

  • Should all (primary) buttons have the same color?
  • Should all clickable elements look the same?
  • Should all clickable elements have the same color?

And so on. The truth is there is no rule (in this case). You could have (primary) buttons of different colors, and you could use the same color for clickable and non-clickable elements. Not all clickable elements need to look like links or buttons. Something that is necessary is that you clearly show which elements are clickable and which are not. You can achieve this by defining hover states.

Also, however you decide to design your UI elements, you need to make sure that you will keep the design consistent throughout the platform. To do this, you could create:

  • A kitchen sink (if you manage HTML/CSS)
  • 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

  • You can use Red/yellow on warnings/notices.
  • 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).

This is great and it helps users understand and decode the information you’re showing them. However, you shouldn’t rely solely on color. Why? Because you need to consider color-blind users, who represent an 8% of the world’s population. For their sake, always try to include clear labels and/or icons to convey meaning, and use color to support this meaning.

More complex palettes

Slack

Image for post
Image for post

slack.com

Stripe

Image for post
Image for post

stripe.com

Tools and resources

Please find some tools and resources to work with color in web design below:

Choosing colors

Check contrast

Color-blindness

Originally published at uxagustina.com on July 24, 2017.

freeCodeCamp.org

This is no longer updated.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store