< Blog

A Crash Course on Color Theory for Website Design

Dina Goldshtein
9 June 2024
Airfleet
color for B2B websites

Why are color palettes important to website design?

Colors have been used to communicate and evoke emotions. Our visceral response to color is coded in our DNA – humans are hard-wired to interpret colors subconsciously. Colors signal action, produce emotions, and can influence psychological responses about your brand.

If you didn’t care about your B2B business’s brand colors, consider this your sign to get invested. Your color palette says a lot about your brand – even when people don’t consciously realize the reason why they make snap judgments is because of their color-flooded lizard brain.

We think of colors choices in website design as serving two main purposes:

  1. Create the appropriate response and level of engagement
  2. Direct a website visitor to their next step in the buyer journey

Let’s break down the science and art behind color choices, and then I’ll share some traps I see people fall into during the design phase.

Where do colors play important roles?

Colors play different roles across different elements on a website. Let’s look at key elements and call out a few trends or things to look for. These elements are listed in my order of importance.

Imagery and animations 

Images and animations can support messaging and content or it can create a big distraction. A trend we see is concentrating color distribution on illustrations, other images, and animation. This creates a high degree of contrast from the background and text. When done well, it can create a focal point without detracting from the text, which must remain clean and highly readable.

example of a website with plain grey background and black text with vibrant illustrations
Balance elements in a section by using color to call attention to what’s important in a way that doesn’t obliterate your message.

Section backgrounds

Backgrounds are meant to be a backdrop, which is why we use stringent guidelines when creating them. Colors should be used carefully to not overwhelm and saturate the on-page experience.

Icons

Icons aren’t just cute illustrations. They should have a purpose. Color can help direct visitors’ focus so they take in the content.

CTAs

We want the color to be inviting while being bold enough to stand out. We also must consider legibility of the text (if applicable) and whether users can correctly interpret where the CTA leads.

very bright color background with minimalist text and buttons
Getting a CTA to stand out doesn’t always mean color. If your website is already “loud,” choose simple black or white buttons with contrasting text.

Fonts

The degree of contrast in color between the font and the background is critical to whether or not a page is considered accessible. We also use colored text or highlights to make a message stand out.

The many ways color matters in website design

I’ve listed how colors can impact elements on a website, but let’s explore color theory across important aspects of design.

Accessibility

Did you know Google measures the contrast between background colors and text colors? A lack of contrast and legibility (an extreme example of poor font choice would be the dreaded Wing Dings) will lower your overall SEO score. This applies not only for headers and paragraph text. Buttons, small tags, sections with CTAs, and more are in Google’s line of sight. 

Sometimes we need to compromise and select new palette options to ensure Google and our end users are able to read all the content properly. 


For example, orange is rarely used on the web for this reason (unless you’re HubSpot!).

orange website with difficult to read text and arrows
Can you see the scroll arrows for the image? How about read the text on the buttons? Not enough contrast can negatively affect your ability to sell your product.

Visual Contrast

Beyond Google accessibility compliance, contrast is very important because of its ability to catch and hold a visitor’s attention. 

However, contrast doesn’t necessarily mean we should select a vibrant color – like poison green. Bright colors aren’t efficient if the background or images steal attention from the viewer. If they don’t see the button, they won’t use it.

If designed well, dark buttons can be an excellent choice.

simple website design with subtle pops of color
The colors are bright but subtle. They may have gotten away with bolder CTA choices, but I think the black works extremely well.

We must keep usability in mind when making color choices, particularly when it comes to CTAs. I would rather focus on contrast than prioritize the vibe (while adhering to the brand palette, of course).

Creating balance

Imbalance can cause end users to lose focus and get distracted, which means they’ll leave your website. When using a lot of colors in imagery and backgrounds, you must keep your fonts and buttons minimalist (black or white). 

black background with vibrant illustration and buttons in balance
An example of vibrant illustrations that take up a minority of the page space with giant, simple text to balance it out.

Busy visuals should come with clean and basic text and backgrounds, while text focus sections may use background colors and CTAs. Either the callout and content or the background should be colorful, but they should never both be colorful.


Make good vibes

Remember the bit about color psychology being a thing since the beginning of humans? Colors are there to create an experience and they have an immense role in giving out a vibe.

another white website with subtle pops of colors to create excitement
An example of a website creating a little excitement through color without overwhelming the user.

Remember, it’s not just about which colors to choose. It’s how to use them in the right amount to set the vibe. 

Do NOT color code

Sometimes the urge to create an organized rule book outweighs functional web design. Your brand is not the same as a software platform. We want consistency across the brand in our palette, but don’t color code products, categories, or elements. Otherwise, you’ll find yourself stuck with a purple product page without being able to use purple anywhere in the homepage. 

Use unique colors when you need to and don’t get stuck in a pattern that doesn’t serve the website well. For example, use different colors for the same product on different pages if you need to. 

Don’t set unnecessary rules that limit the possibilities for color to give life and contrast to your pages. 

Trap #1: “I want a clean website!”

Many clients I’ve worked with want a “clean page” but can’t put the finger on the right level of clean. 

That’s because “clean” can quickly become unreadable as it will lack contrast. Asana is a great example of “good clean.” The images are interesting, which balances the lack of color elsewhere:

asana website with simple colors and bright photograph

In the following Asana example, they use very good levels of contrast to set apart the image while not detracting from the text. Their button is very simple, but easy to spot:

Asana website with white and black with colorful illustration

Again, balance, contrast, and the vibe you want to set should be the driver behind color palette choices.

Trap #2: “I want a vibrant website!”

People equate vibrant with all the colors on the color wheel. Contrary to popular belief, we don’t need a broad palate to make things vibrant. 

Vanta website as an example of vibrant color elements
An example of vibrant colors that pop with an appropriately limited palette.

We recommend a palette to include one or two main colors and three to four supporting colors. The rest of the colors that your brand uses will be expressed in the visuals (illustrations, photographs, animations, etc.). This will create a tidy and consistent looking website without sacrificing your brand palette.

In my opinion, colors are here to help us to separate sections, build a rhythm for greater scroll depth, and help companies to amplify their message and assist users to find what they are looking for. Color selection for your brand and website design are not tasks any company should take lightly.

Register to our Newsletter

Stories and trends of tech b2b marketing websites, zero fluff, tons of fun stuff

Related posts

Phase 2 of the Redesign: Wireframes

Phase 2 of the Redesign: Wireframes

The Airfleet Debrief: A Better Way to ABM

The Airfleet Debrief: A Better Way to ABM

The Airfleet Debrief: Finding Your ICP

The Airfleet Debrief: Finding Your ICP

How-To Improve B2B GA4 Insights: CTA Tracking

How-To Improve B2B GA4 Insights: CTA Tracking

Expecting more from your website?

So do we. Let’s chat about ways to improve your buyer journey.