Hi! We really should talk!

We'd love to introduce you to Readz, the publishing platform used by IBM, Nike, Deloitte, Aon and many more.

Hop on the phone with one of our publishing consultants and get customized advice on how to get started.

MADE WITH

READZ

TRY IT FREE

How To Design With Color

A Guide To Applied Color Theory And Psychology In Design

Color is a powerful design element. It can create a forceful impact as well as balance out subtle details. Color in visual design is a challenge that goes beyond what is visible. Combining colors is about finding harmony or establishing contrast, but colors also evoke emotions, influence the subconscious, and carry cultural associations. In this guide to designing with color, we’ll briefly go into color theory before exploring color psychology and the emotional responses to color choices. We’ll look at what colors are commonly used in which industry before giving practical color design tips and outlining important do’s and don’ts of color design.

Introduction To Color Psychology In Design

Introduction To Color Theory In Design

Spectrum of text contrast and legibility (

source

Do’s and Don'ts of Color Design

Simultaneous contrast can make colors appear vibrating or pulsating (

CC BY 2.5

)

RGB color wheel with primary, secondary, and tertiary colors (

source

RGB color wheel with 360 different colors (

source

Colors can trigger emotional responses, which gives designers an opportunity to use that effect for influencing the perception and reception of the audience. The viewer’s reaction can range between the conscious and subconscious: the color composition can cause a strong and positive association with a brand, for example. But it can also create an impulse or gentle influence of which the viewer is unaware. Visual designers turn to color psychology to predict, stimulate, or influence these reactions, create better user experiences, and strengthen or support the message of a design. The reaction to certain colors is to some extent always personal and subjective, yet there are near universal reactions because we experience color phenomena every day in the world around us, for example as the calming blue and green of nature, or the bright, warming colors of the sun. Other color effects are cultural, which to this day is still reflected in some names, such as royal blue or purple, navy, or marine. In general, the main aim of using color psychology in design is to draw from all these associations and cause an emotional response with color or set a mood through a color palette. The following is a general overview of color associations and responses.

Yellow is a color associated with sunshine and happiness (

source

Blue is the color of the mind and intellect (

source

The natural color green is associated with health and healing and therefore common in the health and medical sector (

source)

Audience

As we've noted above, color associations depend on personal experience and culture, so psychological color choices don't translate to a universal audience. Decisions about color in branding and marketing therefore have to be specific to a target audience. The image of your brand and the feeling or mood you want to convey as well as the context of your campaign or outreach will inform your design.

Research

shows that brands tend to be dominated by one or rarely two of five core dimensions with their specific traits:

Sincerity:
down-to-earth, honest, wholesome, cheerful
Excitement:
daring, spirited, imaginative, up-to-date
Competence:
reliable, intelligent, successful, confident, technical
Sophistication:
upperc-lass, charming, feminine, smooth
Ruggedness:
Outdoorsy, masculine, tough

Favorite colors by gender (

source

We call white the color of peace, innocence, and purity. Our associations with white range from cleanliness and refreshment to good, new beginnings, simplicity, health, and harmony. Through the use of white space, you can provide clarity, balance, and equality in a design and declutter the view, evoking open and airy associations. However, too much white will isolate or feel empty, lonely, or lacking.

White

COLORS

ASSOCIATIONS

INDUSTRIES

Red

Activity, strength, excitement, stimulation, up-to-date, aggressive, energetic, provocative, attention-grabbing, passionate

Retail E-commerce Health Education

Orange

Excitement, optimism, liveliness, energy, extroversion, creative, cheerful, friendly, vitality, fun, playful, exuberant, outgoing

Retail E-Commerce Tech Fitness Logistics Education

Yellow

Optimism, friendliness, happiness, cheerfulness, positivity, light, warmth, motivation, creativity, appeal

Retail E-Commerce Fitness Digital Budget Education

Blue

Trust, confidence, security, responsibility, competence, intelligence, logic, communication, efficiency, duty, dependency

Finance Health Insurance Tech Education

Green

Nature, Security, natural, clean, eco-friendly, peace, calm, safety, freshness, wealth, health, prestige, serenity, generosity

Health Outdoors Nature NGO Eco Insurance Education

Purple

Authenticity, quality, luxury, magic, spirituality, royalty, sophistication, nostalgia, mystery

Luxury Design Tech Church

Brown

Nature, earth, serious, rugged, sensual, simple, durable, comfort, stability, trust, classic

Food NGO Church

Black

Prestige, value, timelessness, sophistication, power, elegance, class, glamour, dignity

Luxury Fashion Finance Automotive

White

Sincerity, purity, cleanliness, simplicity, hygiene, clarity, peace, nobility, class, softness

Health Medicine Wellness Finance

Pink

Playful, warm, soft, nurturing, soothing, feminine

Beauty Clothing Toys

Palette and color scheme are often used synonymously, but whereas the palette specifies a range of (chosen or available) colors, a color scheme is the choice of colors from which you derive or create a palette. For example, you can pick an “oceanic color scheme” to create a palette of various blue tones. In a “warm color scheme” you would limit your palette to the right side of the color wheel, that is those with a warm color temperature. Here are several ways to determine a color scheme for your design:

Monochromatic:
In this kind of color scheme, you pick one key color and then use tints, shades, and tones. All the other colors in the palette are a variation of the base color. It’s a minimalist approach which can maximize effects, yet can also appear visually stunted. A monochromatic palette is easy to manage and can give you a balanced and appealing design with a clean finish. On the downside, you might lack contrast or a color to highlight important elements.
Analogous:
If you pick colors next to each other on the color wheel, you’ll have an analogous color scheme. Pick a base color and combine it with accents. This color scheme works well for soft, comforting designs with little contrast, and you wouldn’t combine warm and cool colors in your palette.
Complementary:
Colors opposite on the color wheel complement each other, which is the base for this color scheme. The resulting palette can create dynamic, stimulating designs, yet the number of color pairings is limited and will likely be in use already by big name brands. Yet complementary colors work well for contrast and stability and allow you to combine warm and cool colors as well as tones at full saturation.
Split Complementary:
Similar to the previous scheme, you split one of the two opposing colors into two adjacent ones on the color wheel to complement the dominant color. The resulting scheme is less tense while still allowing for high contrast and a very nuanced palette. For example, pick a warm, radiant color and two colder ones.
Triadic:
Imagine a triangle placed on top of the color wheel to select three areas. In a triadic color scheme, you then pick in equal parts from these three sections. The resulting palette is stable, yet stimulating, but it can be difficult to match all three colors with your design’s message or brand identity.
Tetradic:
You can use the same principle with a rectangle placed upon the color wheel, resulting in a double complementary color scheme with four colors in two pairs. It’s a rich palette, but will need to be balanced well for harmony. If you use all four colors in equal amounts, you might overload your design. Subdue at least one color and refrain from using solely pure colors.

Color Schemes

An analogous color scheme picks colors adjacent on the color wheel (

source

Split complementary schemes combine a dominant colors and two adjacent colors; triadic and tetradic color schemes use a triangle / rectangle to determine palette colors (

source

Pure colors are all the primary, secondary, and tertiary colors. Arranging them together forms the color wheel of intense and bright

hues

or pure colors.

What Are Hues Or Pure Colors?

Adding further to the pure colors creates more color combinations which are called tints, shades, and tones. Adding white to a hue results in a pastel color called

tint

. A pure color mixed with black creates a

shade

, a color variation that is darker and duller. Black and white combined result in gray, and pairing that with a hue gives you a

tone

. Mixing unequal parts of black and white with a pure color greatly reduces its intensity.

What Are Tints, Shades, And Tones?

Bisecting the color wheel top to bottom separates the warmer colors on the right from the cooler colors on the left. We perceive yellow, red, and orange as warm, whereas blue, green, and purple feel cold to us. The term

color temperature

refers to how warm or cold a color feels and it is expressed in Kelvins. Cool colors have a temperature of over 5000 K, whereas warm colors are below with yellow being in the range of 2700 K to 3000 K, for example. Daylight has a range from 5500 K to 6500 K. Color temperature causes related associations in viewers, so we tend to associate warm colors with energy, brightness, action, positivity, motion, motivation, or power. Cool colors carry a connotation of calm, tranquility, serenity, relaxation, coldness, peace, or stillness. The fact that we have these associations or responses is the basis of color psychology.

What Is Color Temperature?

Red is a warm and stimulating color (

source

We speak of red as a warm color of love, passion, and lust, but also vitality, energy, heat, and warmth. Red is therefore a stimulating, energizing, and exciting color, powerful, dynamic, and physical. Designs with red grab and hold attention, but red is also associated with danger, warnings, aggression, fear, blood, and anger.

Red

Orange

This color speaks of positivity, energy, and warmth. It is stimulating and welcoming in between the joy of yellow and the powerful energy of red. You can use orange to instill fun, enthusiasm, warmth, motivation, and success. We think of freedom, courage, and friendliness when we see orange, but also of change because orange occurs at the season transition from summer to autumn. Orange feels fresh, sensual, playful, full of energy, but in excess we can perceive it as bland.

Yellow

There’s a reason all those emoji are yellow: it’s the happy hue. It evokes a range of emotions and is associated with sunshine, energy, happiness, hope, and energy. It’s a warming, welcoming, and brightening color of joy. Yellow symbolizes optimism, enlightenment, intellect, cheer and goodwill, as well as creativity. Apply yellow as a lifter of spirits and to bring confidence, inspiration, self-esteem, and creativity to your designs. Yet too much of it irritates viewers, causing anger, frustration, or caution.

Blue

We find blue in nature as the sky or in water and enjoy its calming, soothing effect. In general, the color stands for serenity, tranquility, and peace, but also security, trust, reliability, honesty and loyalty. Blue is called the color of the mind and intellect, making us think and facilitating concentration with the cool and airy evocation. Yet when we “feel blue”, we suffer from loneliness, loss, coldness, or distance.

Green

Green is the color of nature, uniting the blue and yellow of water and the sun. It makes us think of growth, natural energy, and the cycle of life, thus invigorating and calming us at the same time. We associate harmony and balance with green, but it’s also the color of money, wealth, and stability and represents freshness, health, healing and hope as well as the earth and environment. The effect of green is refreshing, calming, restoring, quieting, and comforting. On the negative side, we associate green also with guilt, greed, envy, jealousy, or nausea.

A noble color, purple symbolizes luxury, royalty, wealth, loyalty, and ambition. The color has a soothing energy and creates an inward focus, going over into introspection and wonder. Purple is also the color of magic, mystery, and the occult. We tend to have reactions that are spiritual, contemplative, creative, and imaginative. Lighter tones of purple are romantic and flowery, while some tones come across as cheap, especially when used in excess.

Purple

After green, brown is also a color of nature and we think of it as solid and dependable. The associations with earth, coffee, or chocolate make us react in a sensual way. The color offers a grounding comfort that evokes a sense of protection, security, support, safety, belonging, and structure. Brown is serious and reliable, but can also come across as conversative, reserved, dogmatic or closed-minded.

Brown

Black can create contrasts, draw outlines, underline, or inject structure into a design. Dramatic effects become possible which evoke strong reactions to black. We call black elegant, sophisticated, and serious, but the color also represents death, sadness, despair, and mourning. So too much black will be overwhelming or depressing and can suffocate or depress a design. With the right balance, black conveys professionality, control, independence, authority, power, class, strength, and formality.

Black

A flexible neutral color, gray is inherently both warm and cool, modern and traditional, conservative and elegant. Too much gray reduces a design and makes it boring, while sparse amounts add power and sophistication.

Gray

Varying color connotations across cultures (

source

In some cultures the color of death is black, in others it’s white. Cultural difference in the meaning of colors and the things associated with colors make it necessary to consider the specific audience of a design. It’s almost impossible to avoid any negative color connotation across all cultures.

Cultural Colors Associations

Now that we’ve given you a quick overview of color theory and raised your awareness for the implications of color choices, we’ll provide you with practical tips for color design. These will further enable you to make competent and confident color choices in your designs.

Practical Tips For Color Design

In his work

Colour Assignment

, researcher Joe Hallock shows his findings on color preferences and dislikes among men and women in Western societies:

Overview of traits of brand personality dimensions (

source

Least favorite color by gender (

source

In general, men prefer bolder colors and shades, while women favor softer ones and tints.

The effects of color on consumer perception have led to trends in brand personality dimensions and the attempts to amplify brand personality traits through the use of color in design. In other words, brands in the same industry tend to use similar colors to affect consumers in the same way. The following is an overview of colors and their associations across various industries:

Brand Colors By Industries

Color psychology associations by brands (

source

Picking a palette

You assemble a palette for your design by carefully selecting a few colors first. For this, you need to be clear about the purpose of your design:

What are you designing? (Brand identity, campaign, website, app, newsletter...)
What message do you want to convey?
What is your aim or goal? (Conversion, communication, brand identity…)
Based on the color theory principles outlined above, which emotions do you want to evoke with your design? In other words, what traits do you associate with your design and which colors would bring out those?

You can then follow these steps to assemble the palette for your design:

Choose one to four colors
: Consider your base, accent, and neutral color for a combination of three or your primary color, background, first and second accent color for a combination of five. Less colors are possible: one will result in a monochromatic palette, two colors can give you a complementary palette. We’ll go into these in greater detail below.
Base color
: This color should express the dominant trait of your design, message, or brand. Make sure it appeals to your target audience, then consider what other colors will match it.
Accent color
: Just as important as the base color, accents are difficult to choose because you’ll be limited by your base color choice. Accent colors can complement or contrast the base, but should match the personality of the design and work well with the target audience.
Neutral color
: Depending on your design, you’ll use the neutral color for backgrounds or other elements that won’t steal the attention of the main elements. White, off-white, beige, or gray are common neutral colors. Black can be dominating, but also work as a background or neutral color choice.

Accessibility

Not everyone experiences color in the same way. Designing with accessibility in mind means addressing the issues and needs of those with color blindness, visual impairment, or other conditions preventing them from experiencing the design in its ideal form. The Web Content Accessibility Guidelines (WCAG) formulate criteria for the accessibility of online content. What you need to know in terms of color design are these two important aspects:

Don’t use color as the only visual means of conveying information or making an action or element stand out. In other words, a warning message in red should be accompanied by other visual elements, such as an appropriate icon.
Ensure a sufficient contrast ratio between foreground elements such as text, icons, borders, and other elements, and their background.

There is a whole range of tools which allow you to check your chosen colors for sufficient contrast or otherwise ensure your design is meeting accessibility standards for the web. Here are just a few:

Colorsafe
: Quickly check which colors are safe to combine in terms of accessibility.
Color Oracle
: A free color blindness simulator for Windows, Mac, and Linux.
tanaguru contrast finder
: Find good contrasts for accessibility between two colors.
Color Review
: Check the contrast ratio between two colors including preview.
Color & Contrast Picker
: Find accessible color combinations between a background and foreground color.
Accessible color palette builder
: Play around with up to six colors in an accessibility color matrix.
90 Combinations
: A page with 90 combinations of text and background color with high contrast ratio.

In a composition, the human brain processes colors together, not separately. The colors of elements surrounding a color therefore influence our perception of it. Even though hue, saturation, and brightness of one color might be the same, it will appear darker when surrounded by lighter color and the opposite way around. Color relativity doesn't have to be obvious, but consider that the palette of limited colors you pick will always create one impression in your design. Unless you have a white background, one color will appear in front of another and might be influenced by it. Test them against each other for contrast.

We Perceive Color As Relative

To elaborate on contrast: colors of the exact same value (think: opposite each other in the color wheel) create a simultaneous contrast. In this intense effect, any edges or borders where the two colors meet can appear to be pulsing or vibrating. You can use this dynamic color effect and high tension to your design's advantage if you need high contrast or want to draw attention to one element. However, simultaneous contrast greatly affects legibility and you should not use two colors with such stark contrast for text and background at the same time.

Contrast

This simple rule of thumb is a great guide for gauging how much of a color to use in your design. The 60-30-10 rule allows you to balance out color use and goes like this: 60% primary color, 30% secondary color, and 10% accent color. The primary color will dominate your design and make up more than half of it. When the audience looks at your design, the reaction will be: “This is a blue design” - if blue is your dominant color. At 30%, the secondary color supports the decision, creating interest through slight difference. The accent color can be subtle or bold, or keep the design neutral, but you’ll use it sparsely.

The 60-30-10 Rule

Saturation And Vibrancy

If your design requires vibrant colors, don’t overload your palette with vibrant colors, otherwise none of them will stand out. A highly saturated color will appear vibrant, but only so if the viewer’s eye can compare it to less saturated colors. A palette set to 100% saturation and brightness overwhelms. Reduce the saturation for secondary colors to make a primary color more vibrant.

Subtle Changes Have a Huge Impact

Any small change you make to a color in your design can have a huge impact on the audience’s emotional response. In our above color psychology overview and the emotional responses to colors, the general reactions can vary greatly if the exact hue of a color is altered. Keep in mind that blue, for example, can range from navy blue (loyal, traditional), going over into light blue (calming, peaceful), and bright blue (modern, energetic). You can pick two complementary colors on the color wheel to create a simultaneous contrast, but if you lighten one and shade the other, you can create an appealing complementary color scheme.

Keep It Simple

When designing with color, you don’t have to reinvent the wheel. Study what works or has worked for other brands in the past. Begin with a basic color scheme. Often exercising restraint can be more challenging than choosing a wide-ranging palette. Consider an analogous or complementary color scheme first. Analogous schemes are found in nature and are visually calming. You can create variety by shifting saturation and brightness without altering the hues. Through warm or cool color use, you can easily set a “visual mood”. In a complementary scheme, you can add more variety by changing saturation and brightness between the complementing colors and avoid too many bright colors with a high saturation.

Do

Consider and check accessibility issues.
Make use of white space and learn to design with white space.
Think of color psychology and the probable emotional responses to your color choices.
Look at what the color choices for other companies in your industry are.
Use color to the advantage of your message, design, or brand.
Guide the eye through the use of color in your design, but use other elements for that purpose as well.
Try to keep your color palette simple.
Aim for a clear design.

Don’t

Use a dark background with light text in your design to avoid eye strain.
Compromise readability because of an unusual color combination.
Overuse the primary color or use too many colors.
Go for color effects just for the sake of it or to experiment for the sake of experimenting.
Use your favorite colors without considering what your design requires.
Copy the exact palette of another brand just because it works for them.
Put too many visual demands on your audience, straining their patience or attention span.

Let’s begin with some basics of color theory. The colors we see are actually light or more specifically light waves reflected off the things around us. Colors exist as primary, secondary, and tertiary colors. The primary colors are yellow, red, and blue. All other colors are some form of mixture of these three, which is why the RGB color model of red, green, and blue is also called an

additive color model

. Since color is light, the more you add, the brighter the color becomes. All three in equal parts result in pure, white light. Two

primary colors

in equal parts create one the

secondary colors

, purple, green, and orange. Color combinations with primary colors in unequal parts create

tertiary colors

where one color is dominant, for example yellow-green or blue-green.

Black is associated with elegance and luxury (

source

A monochromatic palette in red (

source

Complementary colors are opposite each other on the color wheel (

CC BY-SA 4.0

Color Picking Tools

This is a collection of online tools and resources for picking colors and assembling a palette for your design:

Colour Lovers
: Explore over a million color palettes.
ColorDrop
: Browse palettes and gradients or create them from uploaded images.
Colormind
: A color scheme generator using deep learning to create styles from images and art.
Khroma
: Create and search palettes with the help of AI.
Coolers
: A fast color scheme generator
ColorSpace
: Enter one color to generate palettes.
ColorDesigner
: Get help for building a palette with tints and shades based on a base color.
Colourcode
: Build various palettes based on the color wheel.
Color Hunt
: An open collection of palettes to share trendy combinations.
Palettr
: Generate palettes inspired by a theme or a place through a search engine.
BrandColors
: A huge collection of official brand colors.
Designspiration
: Browse concepts and colors.

Most designers instinctively understand the principle that color has an effect on the readability of text. They avoid a clash between text and background color. However, legibility problems still pop up in designs through a more subtle tension between text and the color of other elements, such as borders, headers, highlight elements, or forms. Here are basic guidelines for text legibility in terms of color:

Check the contrast between text and background and avoid low contrast there.
On white background or elements, avoid bright text color. Black and dark gray will work best.
Avoid complementary colors for text and background. This is especially true for colors similar in brightness and saturation.

Text And Legibility

Harmony

Color harmony is a term to express a match between colors used in a design or artwork. Harmonious colors look aesthetically pleasing when viewed side-by-side. The opposite of color harmony or matching colors is color disharmony or clashing colors When do colors match? In the words of Andrew Loomis, illustrator and instructor at the American Academy of Art in Chicago, "Any two colors will be harmonious when one or both contain some of the other." Try it and see for yourself if that principle works in your design if you're after harmonious colors. Another approach to color harmony is to add black, white, or gray to the primary color of your palette and create a more subdued secondary color, thus changing the emotional impact of it.