HOW COLOR IS USED ON A WEBSITE

Hide CTA

Meta Title

Meta Description

Hide in Main Feed

Do not index

Hide Cover

Autor

“Color is a power which directly influences the soul.”

This quote by Wassily Kandinsky speaks volumes about our topic, which is how color affects web design.

As web developers, one of our primary tasks is to ensure that every website we create gets across the right message in the right way.

And one of the biggest factors in this is by using (the right) colors. Choosing a color scheme goes beyond using your client's (or your) favorite colors or even their brand colors.

There are a lot of factors to consider, and in this article, I’m going to discuss most of them.

As an essential design element, color is a powerful tool for communicating visually. It is so useful that it is often implemented intuitively, without our consciously being aware of how it is working.

In order to reassess colors used for accessibility, let’s zoom out and review the common purposes the color serves on a website.

In general, color exists to characterize, to direct attention and to provide feedback. More specifically, color is used for…

Branding—A specific color scheme is an important factor in a business’s visual identity. Think of Netflix’s red or Twitter’s blue. In other words, color in this case acts as a visual shorthand for a brand name.

While important, this often exists in the background, working on a subconscious level.

Visual hierarchy—Color can be used to create emphasis and order on a page, providing visual landmarks for viewers to direct their eyes.

For example, entire sections of the web page may be colored differently to signal differing content subject matter. On a smaller scale, a lightly colored box might surround less prioritized content, such as a tool tip.

Visual feedback—Color can indicate whether a user has successfully completed an action. Red and green are the most common colors used for this purpose—a green checkmark when a user ticks a box or a red ‘X.

when a user clicks on something they do not have access to (red/green colorblindness also happens to be the most common form, by the way).

Data visualizations—Color makes complex charts and graphs easier to read. This is especially true in the case of a pie chart, where colors are displayed side-by-side.

Interactive text—Color can mark the difference between what is meant to be passively read and what is clickable. The most common example is the fact that hyperlink text is usually colored blue.

Common color associations

The below color associations can be used as a reference guide as you consider which colors would best represent a particular brand. How should the target audience feel when they encounter the brand's website? What actions should they take? With the right context, color could make the difference between an engaged potential customer and a disinterested passerby.

Red: passion, power, love, danger, excitement

Blue: calm, trust, competence, peace, logic, reliability

Green: health, nature, abundance, prosperity

Yellow: happiness, optimism, creativity, friendliness

Orange: fun, freedom, warmth, comfort, playfulness

Purple: luxury, mystery, sophistication, loyalty, creativity

Pink: nurturing, gentleness, sincerity, warmth

Brown: nature, security, protection, support

Black: elegance, power, control, sophistication, depression

White: purity, peace, clarity, cleanliness

Anatomy of a color:Understanding basic color theory is a good place to start. It can be a little daunting and technical but will help you understand the basics of color relationships. To be great at anything, you first have to know the rules so here is a basic overview.

Color wheel:

How to pick color harmonies.

The easiest way to select color combinations or palettes is using the color wheel and applying the principles of analogous, complementary, monochromatic, and triad color harmonies.

Color Models:

We describe colors using color models. There are millions of colors and naming them all and remembering the names is impossible, that’s is why color models or standards were invented to help us describe colors.

The RGB Model:The RGB model is used when working with screen-based designs. A value between 0 and 255 is assigned to each of the light colors, Red, Green, and Blue.

The CMYK Model:The CMYK model is used for print work and it describes colors based on their percentage of Cyan, Magenta, Yellow, and Black. CMYK is known as a “subtractive” color model

The LAB Model:The Lab color model is a slightly more complex beast. It is made up of three components – the lightness component (L) ranging from 0 to 100, the “a” component comes from the green-red axis in the Adobe Color Picker, and the “b” component which comes from the blue-yellow axis in the Adobe Color Picker.

How to use color palettes in website design

There are various online tools you can use to aid in the process of creating color palettes. A personal favorite, demonstrated in the screenshots above, is Adobe Color. With this tool, you can play around with the color wheel to create a custom palette with any of the five color palette types listed above. You can also upload an image to extract colors from, or click on the Explore tab to peruse pages and pages of color palettes.

To start, I recommend choosing three colors for your palette: a main (or primary) color, secondary color, and accent color. Then, use the 60/30/10 rule to apply these colors in your website design. According to this rule, 60% of the color used should be the main color, 30% the secondary color, and 10% the accent color. Keep in mind, black and white count as colors, too. Below are some examples of stunning websites that incorporate the 60/30/10 color rule.

Where to find color inspiration.

Inspiration is everywhere, it can be found in the outdoors, by studying different design fields, understanding your customers and competitive market, and by staying informed with forecasted color and web/ branding trends. To help you on your color journey here are some of the trusted resources used at Studio1Design.

Pantone: Pantone is the design industry leader when it comes to color. Pantone provides the latest in color trends across all forms of graphic arts, fashion, and Interiors, paint & plastics. Pantone is a physical color index and the perfect tool for any designer or business crafting products that are printed. Using physical color swatch’s allows you to know exactly how your color will look when it’s on paper or fabric saving you time and guesswork.

Pinterest: Pinterest holds an impressive amount of color palettes created by designers and creatives all around the globe. Simply search by color, season, or theme for instant color inspiration.

Color Websites: From bright Pantone swatches to colorful idea boards, dedicated color websites and blogs can be a great way to experience unique color combinations you might not have thought to try otherwise. Try sites such as Design Seeds, Color Collective, COLOURlovers, Color Wheel by Adobe, or Colrd for instant color palette inspiration.

Call-to-Action Buttons

CTA buttons are buttons that incentivise action like to buy a product, register for a free trial or download an eBook. Marketers actually go through a lot of data and tests to get the right CTA button copy, color, size, and position.

Why go through so much hassle?

Because having a better CTA button means more business.

Here’s an example of Divi’s CTA button:

A quick look and you’ll see the main CTA here is the green button. The main button is green not by accident.

They want to lead people’s attention to it and they know that green contrasts nicely with the white, so it will be the first thing that people will notice upon landing on this page.

They do the same thing with another CTA button at the top which says, “Join To Download”.

This leads me to a big question:

What is the best CTA color to use?

The bottom line is that there is none.

Although green, orange, and red are the most common choices for CTA buttons, there is no single color that guarantees the best conversion rate.

Instead of looking for the “best color”, what you need to aim for instead is creating the highest contrast.

HubSpot ran a test to see which CTA would perform better between a green and red button with no other changes:

The test went on for a few days and had over 2000 subject visits.

Results: The red button got 21% more clicks than the green.

Does this mean that red converts better than green? Not necessarily.

You’ll notice that since green is the dominant color of the website, red stood out more. That’s a plausible explanation for its better performance.

It could also be that Performable’s visitors happened to like red. Another test is by Dmix which showed the red button outperforming the green button by 34%. But again, there could be a lot of factors to explain the result.

A/B testing is the best way to find the “best” CTA button color for a specific website or webpage.

Colors Influence How People Feel About Your Website

On the subconscious level, color impacts people’s perception more than we think.

This is the main precept of color psychology.

Research by the Institute for Color Research reveals that people make a subconscious assessment of an environment, person, or product within 90 seconds of initial viewing – and between 62% and 90% of that assessment is based on color alone.

Colors have different impacts on our perception and your choice of color can significantly impact users’ first impression on your client’s brand and overall experience on the website.

The way you use color can increase or decrease people’s trust on the website and turn them into loyal customers or not.

When people land on your website, you want them to:

Trust the website/business

Be convinced enough to stay on the website

Persuaded to perform the desired action (CTA)

Everything you do in your design should support these goals.