The

complete
guide for
choosing
colors
Let’s
Color is powerful.
It changes the way we interpret words.
It forms our opinions about certain situations.

Combine It impacts the way we remember an

experience.

Colors In design, we need to see color as a form of

communication. It’s a vessel for getting our
point across, for guiding our audiences from
one point to another. It helps us to build a
connection with them and to evoke them into
feeling one way or another.

With so much riding on it, how we use color

can often completely make or break a
design. This can be daunting when you feel
you know nothing about perfect color
combinations or how color psychology
works.

Within this guide, we will teach you how to

choose the right color combinations for your
project. Using color in an impactful way can
help to make your website more
memorable; more impactful for both the
company and the consumer.
DEFINE
THE BRIEF
When you begin work with a client, they NOW, IT’S TIME TO ASK YOURSELF
will often encourage you to familiarize SOME QUESTIONS.
yourself with their brand guidelines.

When it comes to colors, use this as your What constraints do I

starting point to better understand your have?
client, so that you can produce a design
that directly matches their brand. To find the answer, thoroughly read their
brand guidelines. Always ensure you fully
On the other hand, you might work with a grasp their direction. If there is anything
client who has zero branding and zero unclear, ask for further clarity.
preference for design direction.
Furthermore, look to see if there are any
As a designer, this is an even bigger technical limitations or guidelines on the
challenge than working with someone formats or combinations you can and
who has the strictest guidelines you’ve cannot use.
seen.
Is this all the guidance I
Free reign can be fun, but it leaves a lot have?
of room for error. In these circumstances,
make sure you speak with your client If you’re working with a new company,
about what they’re trying to achieve, who they may only provide you with very brief
their target audience is, and how they’d brand guidelines.
like their website interpreted.
However, if you’re working with a more
Often clients underestimate the power of established business, it can be helpful to
color and design until they see it in take a look through existing materials
action. they have to understand how they use
color and color combinations to convey a
However, in the following example, let’s message.
say you have received a design brief that
helps you to choose the colors without This can help steer your decisions within
any issues. the web design process.
What do I want the viewer What do I want the viewer
to do? to feel?

This will be important to know when Do I want to provoke them?

you’re trying to guide the eye to a Interest them?
particular piece of information or a call Calm them?
to action they should take. Entertain them?

Defining the scope of what you want to Understanding the intentions and
achieve from the viewer will impact your connections that the brand wants with its
color choice at certain stages of design audience will also help to narrow down
depending on if you wish to attract or your color options in specific areas of the
distract. website.
SELECTING
COLORS
The Primary Hue

ALL COLOR PALETTES BEGIN WITH

ONE SINGLE COLOR.

Choose your primary hue depending

on the mood you seek to set and the
tone and associations you want your
visitors to have on your website.

Before picking your primary hue, it is

helpful to consider its color
psychology. Every single color can
create certain reactions and emotions
in different people, especially across
different cultures and backgrounds.

However, how each color is

interpreted tends to be situational.

For example, for some red is the color

of passion and love. Yet, it can also
mean danger and warning. Using red
in one situation could give a person
positive feelings, whereas in another it
can provoke anxiety. Understanding
each hue’s impact will help you to
make an educated decision based on
the type of site you’re building.
The Number of Colors

Once you have a base color, it’s time

to build a palette.

There are many color palette

generators you can use online to help
you visualize great combinations at
work.

Check out: Coolors.co With sites like this, it will introduce you to an array of
palettes based on your original shade.

THE MOST COMMON COLOR PALETTES USUALLY FALL

INTO THE FOLLOWING CATEGORIES:

MONOCHROMATIC ANALOGOUS
When the full palette includes hues from a Colors that are next to each other on the
single color. color wheel.
COMPLIMENTARY SPLIT-COMPLEMENTARY
Two colors opposite each other on the Like complementary, which uses the
color wheel. These work really well where a opposite color, this palette uses two
high level of contrast is required. opposing colors.

TRIADIC TETRADIC
This is created from three colors that are Also known as the rectangle uses four
evenly spaced around the color wheel. colors. This allows for plenty of variation
within the design.
UI Considerations

The 60/30/10 rule is common

practice for web design. This means
you use the primary color 60% of
the time, the secondary for 30%,
and the accent color for only 10%.

While this doesn’t need to be

STRICTLY adhered to, having some
sort of percentage can help you in
varying and balancing a page.

Fewer elements generally equal less

chance of making a huge design
mistake, so it’s usually helpful to
build the base with simplicity in
mind and develop the accents to
create the color pops later in the
design process.

Helpful Resources

Building a basic color palette

Coolers.co
Canva Color Generator
Colormind.io

Building a gradient palette

My Color Space

Contrast checker for text on color

Color Contrast.cc
COLOR USAGE
RULES
We’ve mentioned the 60/30/10 rule
already, which is undoubtedly one to be
considered.

However, one thing to note is that it

doesn’t have to include only three
colors. This is merely a guideline to help
you gauge how much dominance your
primary color should have with any
accents.

Another helpful thing to consider is

contrast. The higher the contrast
between two colors, the more each
color will stand out from one another.
When it comes to contrast, you can’t just
think about the color itself, but also the
tone you use. This will profoundly impact
the visibility of the overlap and eye
strain needed to comprehend it.

High contrast will mean the text is

more legible.

Low contrast, and you’ll have an

abundance of people who couldn’t read
the message you were aiming to display.
REVIEWING
YOUR WORK
When it comes to designing color, you will
need to play around a little to determine if
something works or not. What it looks like in
your mind may not work on the screen and
vice versa.

Once you’ve completed the first draft of

your design, ask yourself some last
questions.

Is it functional? Is it consistent with brand

guidelines?
For example, is the text legible? Does the
color distract or compliment? Does it guide A beautiful website is great, but if it doesn’t
the eye or capture it? Your color choice match the brand guidelines, then it’s not
should support what you want the viewer to very helpful for your client.
do (i.e., taking action) rather than Before you submit it for review, double-
confusing or overwhelming them. check that you’ve used the exact color
codes and combinations they use in their
Is it appealing? brand guide.

Some color combinations are functional Have I answered the brief?

(i.e., you can easily read them), but they
don’t look very appealing. If that is the Test your website a couple of times to
case, maybe a shade below or above might check if it does what your client has asked
improve how it’s interpreted. you to make it do.
Thanks for reading,
We would love to see you in one of our in-
depth courses or on our free social media
channels.

BROWSE OUR COURSES

BROWSE NOW

Until next time, happy designing!

Ran Segall &

The Flux Academy Team