Color Harmony

Your constantly-updated definition of Color Harmony and collection of videos and articles. Be a conversation starter: Share this page and inspire others!

88 shares

What is Color Harmony?

Color harmony in design refers to the balanced and aesthetically pleasing interaction of colors. Designers use color harmony to influence user experiences, create brand identity, and enhance accessibility. Color harmony is not only about attractive colors but their impact on the overall design.

In this video, Joann and Arielle Eckstut, leading color consultants and authors, give six tips to help designers choose colors:

Show Hide video transcript

00:00:00 --> 00:00:32

How do I choose the right colors? I am a firm believer that there are no such things as right colors. There is always more than one way to apply color successfully. But I do believe in asking a series of questions before choosing a palette. Number one. Most importantly, do you need to incorporate existing colors or are you starting from scratch?
00:00:32 --> 00:01:00

Look at what's already there. Are you working with a company company that already has a turquoise logo like Waze, for example? That doesn't mean that a brochure you design has to match the turquoise, but it helps if your palette relates to the logo. If they're going to sit on the same page, you also should consider the context of the overall style of what's already in place.
00:01:00 --> 00:01:31

Is the emphasis, for example, on darker, more conservative colors or bright and festive ones? Number two, what colors does your client love? What colors do you or the person or the company you're working with gravitate to? Does your client at fresh direct love the color green, but you're presenting them with oranges and reds. You're going to get a happier client, personally, if they like the colors.
00:01:31 --> 00:02:01

If they personally, personally, like them. If not, it might not be so good. Getting a feel for their personal palette can be the key to success, and it can be as easy as putting a paint deck in front of someone and asking them to point to colors that they find appealing. Number three, what is the overall effect you're trying to create? Do you want a color scheme that shouts, “Here I am”?
00:02:01 --> 00:02:32

or do you want something that whispers softly? It's not just the hue that you choose that evokes a particular feeling, but it's the chroma, meaning the intensity and the value how light or dark a color is as well. Intense colors emphasize objects that they cover and their flashy, dark, warm colors have a way of drawing things together and are intimate. Light cool colors have a way of opening things up
00:02:32 --> 00:03:02

and making them more expansive, especially if they're in a similar hue and value. In the case of the Washington Post app, the deep blue connotes a seriousness and authority that matches with their mission. Number four, the effect of color on scale. Are you trying to make a room look smaller, bigger, taller or shorter? I use color to adjust any deficiencies
00:03:02 --> 00:03:30

in the scale of a particular space. If I'm painting a room with an uncomfortably low ceiling, a lighter color on the ceiling than on the walls will make the room appear taller. As you can see on the slide on the left, if I'm painting a room with uncomfortably high ceilings, a darker color on the ceiling than on the walls will make that room appear lower. As you can see in the slide on the in the middle,
00:03:30 --> 00:04:04

if you want to make a room feel less long and narrow. I would put an accent color on the end wall as in the slide on the right. The following slides illustrate how changing the paint colors can drastically change the scale and the feeling of a room. We are flipping through these now, just so you can get a quick sense of how this works and last on exterior facades. You can also see how color is used to emphasize either architectural details
00:04:04 --> 00:04:33

like windows and trim or on the building form itself. In the left slide. The first and second houses are done in varying forms of a monochromatic scheme that is sort of maroon and dark blue, whereas the houses further down with the green and tan and the red and tan emphasize architectural details. In the slide on the right, the details like window
00:04:33 --> 00:05:00

trim and doors are emphasized in the gray and yellow houses, while the architectural form of the building is emphasized in the charcoal gray house further down to the right. Number five. Are you looking for colors that are contrasting or harmonious? Once you have chosen your dominant hue, then you need to decide which color scheme you prefer.
00:05:00 --> 00:05:32

Monochromatic schemes where you're using shades of the same color to give the greatest sense of harmony. Complimentary schemes that use highly contro casting colors that hit opposite each other on the color wheel can be anywhere from exciting to jarring. And then there's everything in between the two ends of the bell curve. In this last slide, there is what it's called an analogous color scheme where you can see the similar greens and in the green on the left it's
00:05:32 --> 00:06:01

used with a color yellow, which is next to green on one side of the color wheel. And in the right side it's green with a blue, which is next to it, on the other side in the color wheel. Number six why a neutral in every palette. First, let me give you a definition of neutrals. Neutrals are created by mixing a hue and its complement together in varying proportions.
00:06:01 --> 00:06:31

This muddies or grays down the original hue, neutrals help to bring other color choices together by creating a place for the eye to rest. And they work as excellent backgrounds for more intense accents. In this slide on the left, you can see that the neutral is used as the background color, and on the right, the neutral is used as an accent in the next slide.
00:06:31 --> 00:06:36

You can see how the pale, gray, neutral acts as a background for intense accents.

Table of contents

The Basics of Color Theory: Where Does Color Harmony Fit In?

Color harmony is an application of color theory principles that focuses on the creation of visually pleasing combinations of colors. Color theory is a set of principles and guidelines that explores the relationships and interactions between colors. It provides a systematic way to understand how colors work together and how they affect emotions.

Color theory consists of these fundamental elements:

The Color Wheel

The primary, secondary, and tertiary colors are arranged in a torus shape in individual segments. — The color wheel comprises the primary, secondary, and tertiary colors.

© Interaction Design Foundation, CC BY-SA 4.0

The color wheel comprises:

Primary colors: red, blue, and yellow.
Secondary colors: colors formed by mixing two primary colors. These are green, orange, and purple.
Tertiary colors: colors formed by mixing primary with secondary colors. Examples of tertiary colors are blue-green (often called teal) and red-purple (often called magenta).

The color wheel visualizes how colors relate and is an essential tool to choose color schemes.

Hue, Value, and Saturation

Every color consists of three components:

Hue is the specific color that makes it different from other colors on the color wheel.
Value represents a color's relative lightness or darkness in grayscale. Value is essential to establish contrast and depth in visual art.
Saturation, also called chroma or intensity, describes the purity and vividness of a color. Saturation can vary from fully saturated (vibrant) to desaturated (grayed).

Using these three components, designers define their color schemes.

Color Temperature

The primary, secondary, and tertiary colors are arranged in a torus shape in individual segments. A line cuts through the middle horizontally, which separates the warm colors at the top and the cool colors at the bottom. The warm colors range from yellow to red-purple. The cold colors range from purple to yellow-green. — Each color on the color wheel has its own perceived temperature. Yellow to red-purple are warm colors, while purple to green-yellow are cool.

© Interaction Design Foundation, CC BY-SA 4.0

Color temperature refers to the perceived warmth or coolness of a color. Warm colors (reds, yellows) and cool colors (blues, greens) can dramatically affect the color harmony in a design. Color temperature can influence the mood and emotions of the user.

What Is the Impact of Color Harmony on UX?

Color harmony significantly enhances User Experience (UX) in the following ways:

Draw Attention and Engage Users

An interface's balanced and attractive color scheme can hold the user's attention. For example, an online learning platform might use a subdued, monochromatic color scheme interspersed with vibrant, contrasting colors for important elements. Beyond aesthetics, a serene color palette can minimize visual fatigue, making study sessions more comfortable. This color harmony enhances user engagement over more extended periods.

An IxDF lesson page. At the top of the page is a progress bar with a blue line indicating progress. On the left is the lesson navigator showing the list of lessons. In the center of the page is the lesson content, a combination of images and black text on a light gray background. On the bottom right of the page is a blue button that says — The IxDF course platform primarily uses a monochromatic grayscale scheme to help users stay immersed as they learn. The use of blue as a highlight helps users quickly identify their progress in the course and get any support they might need.

© Interaction Design Foundation, CC BY-SA 4.0

Enhance Usability

Designers use color harmony techniques to create contrast in their designs. Contrast aids users by clearly separating content types and functionalities. For example, Ryanair uses color harmony techniques to make essential elements more prominent. This use of color makes it easier for customers to navigate the site, easily understand where they are, and find what they’re looking for.

The Ryanair search box. The search box is white on a blue background. To the right of the search box is a yellow-orange search button. Across the top are four search categories to choose from: Flights, Car Hire, Hotels, and Events and Activities. The selected category, Flights, has a yellow-orange line beneath it. — Ryanair uses a complementary blue and yellow-orange color scheme across its website. A yellow-orange line indicates the current page the user is on. The search button's use of color makes its purpose clear and draws attention to the search function as a whole.

© Ryanair, Fair Use

Readability

Colors with poor contrast can blur elements together and create a confusing user interaction path, the opposite of color harmony. A typical example of poor color balance is when the colors used for text and background make it difficult for users to read the content. Faced with such poor balance, users often choose to leave the site.

Brand Perception

Colors can symbolize emotions that align with a brand's persona. Brands that promote environmental care often use shades of green and earth tones, which represent tranquility and eco-friendliness. Another example is fast food brands, many of which use red in their color schemes. For some people, the color red stimulates hunger.

Two versions of the Uber homepage that have different color schemes. Both versions have the headline — The ride-hailing app Uber uses black and white as its primary colors—a monochromatic harmony. The example on the right shows a different color scheme applied—yellow and purple, a complementary color harmony. In this example, the Uber website feels vibrant and almost regal. However, Uber chose black and white to imply elegance and simplicity, which is not symbolized by the yellow and purple scheme.

© Uber, Fair Use

How to Achieve Color Harmony

Designers use a step-by-step process to choose colors that create harmony in their designs. While intuition and taste are involved when selecting colors, there are defined steps, tools, techniques, and tests that designers use to ensure color harmony:

Find Inspiration: Start with broad visual brainstorming. Take cues from nature, art, architecture, or even fashion. Review successful designs within your industry that achieve color harmony. Assemble these inspirations to spot themes and spark potential color ideas.
Select a Dominant Color: This color should align with crucial aspects such as brand ethos, target user group, or the emotions you want to convey. This color forms the foundation of your palette.
Consult the Color Wheel: Use your chosen color as a compass to see different color harmonies on the color wheel. If red is your selected color, an analogous harmony will add red-orange and red-purple to your scheme, while a triadic harmony will add yellow and blue.
Use a Tool or Template: Use color scheme generators or pre-made templates to create harmonious color combinations. These can streamline the creation process and serve as a source of inspiration.
Keep It Simple: Creating complex color schemes with many different colors can be tempting. The more colors you add, the more complex color harmony is to achieve. Start with a simple scheme, and see if it fits your design needs before adding more colors.
Define Color Hierarchy: With your colors identified, assign functional roles to each. The dominant color takes center stage, secondary colors support, and accent colors highlight essential elements such as call-to-actions.

Michal Malewicz, Creative Director and CEO at Hype4, explains how to use color in UI design:
Show Hide video transcript
1. 00:00:00 --> 00:00:34
  
  If you're starting as a designer, you don't need a lot of colors, just as with fonts. If you thinking that "Okay, I have 60 million colors in that little picker, so let's try to use all of them," that's not really the case. What you really need is a background color, a foreground color and an accent color. And there are some rules that you can then look up on your own later like the 60-30-10 rule, which is pretty useful.
2. 00:00:34 --> 00:01:03
  
  But in general, what you need to really remember from this is that you need a *background color* – so in my case it's going to be white. Then you need a *text color*, which is going to be some sort of black or dark gray, and the *accent color* for the important action. And one thing that you can actually tweak here is to have that darker color, instead of being pure black, add a little bit of that accent color, so in our case the blue to it, so it's just going to look a little bit more connected to
3. 00:01:03 --> 00:01:30
  
  the blue and it's just going to look better together. So, that's just one way. And you need three colors really to pull off most designs. And you can start adding colors once you feel more comfortable with them. But when you're starting, really just the less colors the better because it's just much harder that way to screw it up. Two of the worst possible color combinations is mixing red with either very saturated blue or very saturated green.
4. 00:01:30 --> 00:02:00
  
  And if you look at it more closely depending on the type of screen that you have, you'll see that on the place where they kind of mix together that little line becomes a little bit fuzzy. If you look at it a little bit longer, it starts to hurt your eyes in some cases, in some cases on some screens, because this contrast of those colors works really, really *bad* together. So, if you want to make a Christmas app for example, there are better ways to do it but generally avoid those color combinations,
5. 00:02:00 --> 00:02:15
  
  and always test your colors if they're clashing that way, so you can just place one on top of the other and see if that fuzzy line appears on them. And that's one way to actually test it – you know – *by eye*, just looking at it. If it looks good, then it looks good.
Implement Contrast: Pair contrasting colors for important functionalities and contents, ensuring readability and visual guidance throughout the interface.
Be Mindful of Cultural Contexts: Keep users' cultural color-related attitudes and perceptions in mind. Make sure your chosen palette reads as intended to your target audience.
Prototype and Test: Apply your scheme to your design mock-up, then conduct user testing or surveys. A/B testing is beneficial for color harmony.
Iterate and Refine: Based on feedback, continuously adjust your palette. Ensure it remains relevant to your brand, attractive to your users, and functional within your interface.

What Are the 7 Main Color Schemes?

These 7 schemes serve as a guide for designers to choose harmonious colors. Designers use these schemes as they are or as a foundation to build their color palettes. Remember, while the color wheel consists of 12 main colors—primary, secondary, and tertiary—there are millions of colors with different hues, values, and saturations. Experiment with these color schemes and the array of colors available to you as a designer.

Monochromatic

The primary, secondary, and tertiary colors are arranged in a torus shape in individual segments. The yellow segment, at the top of the torus, is enlarged. — © Interaction Design Foundation, CC BY-SA 4.0

When designers use monochromatic schemes, they combine different versions of the same color to create a unified and elegant look. Designers must maintain contrast in these schemes to prevent monotony.

Designers often employ monochromatic schemes in minimalist designs, as using one color reduces distractions. However, the simplicity of monochromatic schemes comes with a limitation: designers cannot utilize multiple colors to aid in visualizing information.

The Uber logo uses the most simplistic monochromatic color schemes—black and white.

Analogous

The primary, secondary, and tertiary colors are arranged in a torus shape in individual segments. The three segments at the top of the torus are enlarged. These segments are yellow-green, yellow, and yellow-orange. — © Interaction Design Foundation, CC BY-SA 4.0

An analogous color scheme involves three adjacent colors on the color wheel. This scheme is often seen in nature, like autumn leaves, as they change colors. There's a variation known as the "high-key" analogous color scheme, created by blending analogous colors with white.

Impressionist artists frequently use this scheme. The result is a shimmering, blurring effect of colors merging. From afar, a high-key analogous scheme might give the impression of being a single color.

The MasterCard logo uses an analogous color scheme—red, orange, and yellow.

Complementary

The primary, secondary, and tertiary colors are arranged in a torus shape in individual segments. The yellow segment at the top of the torus and the purple segment at the bottom are enlarged. There is a line connecting these two segments. — © Interaction Design Foundation, CC BY-SA 4.0

Complementary color schemes pair colors that neutralize each other when mixed, typically resulting in white, black, or a grayscale shade. This approach, also called the "opposite color" scheme, creates a high contrast. Modern color theory identifies these pairs as red/cyan, green/magenta, and blue/yellow.

The Ryanair logo uses a blue-purple and yellow-orange complementary color harmony.

Triadic

The primary, secondary, and tertiary colors are arranged in a torus shape in individual segments. An equilateral triangle connects three enlarged segments together. These segments are yellow, blue, and red. — © Interaction Design Foundation, CC BY-SA 4.0

A triadic color scheme consists of three colors spaced evenly around the color wheel. To identify these colors, you can place an equilateral triangle on the wheel; each corner will point to a color 120° apart from the others.

Triadic schemes offer a harmonious yet visually striking contrast. They appear vibrant, even if the individual hues lack vibrancy.

Many artists prefer using triadic color schemes in their work. Compared to complementary schemes, triadic ones make it simpler for artists to achieve visually appealing results.

The Airtable logo uses a triadic color harmony—red-purple, yellow-orange, and blue-green.

Split-complementary

The primary, secondary, and tertiary colors are arranged in a torus shape in individual segments. An isosceles triangle connects three enlarged segments together. These segments are red-orange, green, and blue. — © Interaction Design Foundation, CC BY-SA 4.0

In split-complementary color schemes, designers blend the principles of complementary and analogous colors. They select the complementary color to their primary and then include the adjacent colors on the color wheel.

This approach moderates the often bold or harsh effect of using complementary colors alone, making it easier on the viewer's eye.

Tide uses a blue-purple, yellow, and orange split complementary color scheme. The blue has a lower intensity contrast against the two other colors compared to a blue-purple and yellow-orange complementary color scheme.

Tetradic

The primary, secondary, and tertiary colors are arranged in a torus shape in individual segments. Four segments are connected by a rectangle. These segments are green, orange, red, and blue. — © Interaction Design Foundation, CC BY-SA 4.0

The tetradic color scheme includes two complementary color pairs. This scheme can produce vibrant visuals, yet designers find it challenging to achieve balance.

In a tetradic scheme, designers must choose a dominant color, ensuring it doesn't overpower the others and cause imbalance. If designers use equal amounts of each color, it can result in an unappealing appearance, which they aim to avoid.

The Google logo uses a tetradic color harmony.

Square (A Variant of Tetradic)

The primary, secondary, and tertiary colors are arranged in a torus shape in individual segments. Four segments are connected by a diamond shape. These segments are yellow, red-orange, purple, and blue-green. — © Interaction Design Foundation, CC BY-SA 4.0

In the square scheme, a variant of the tetradic scheme, designers select four colors by positioning a square on the color wheel. These colors offer a balanced palette when spaced equally at 90° intervals. The design typically looks best when the designer incorporates all four colors uniformly.

Color Harmony: Key Considerations

Depending on what a design is for, who will be using it, and where it will be used, designers must consider several factors when creating color harmony.

Established Color Schemes

Brands employ defined colors to resonate with their audience, emanate their brand persona, and enhance recall value. Therefore, established brands may limit designers' choice of color based on existing brand color schemes.

For example, Coca-Cola relies heavily on red and white, a monochromatic color harmony. The vibrant red symbolizes energy and passion, while the pure white offers balance. This color harmony represents Coca-Cola’s dynamic yet universal appeal.

Designers working with Coca-Cola must consider the brand color scheme in their work.

The Coca-Cola website uses the brand’s red and white color scheme for its primary colors. The cookies and accessibility widgets also use this color scheme. The headline image introduces additional colors as part of Coca-Cola’s holiday campaign. Green is one of the colors used, which forms a complementary color harmony with red.

Color Symbolism

Our relationship with color is complex and rooted in biological, cultural and personal associations. Designers must use research and investigate cultural values to create good designs.

Every color carries different symbolisms that should inform color choices. While designers may choose a specific color to evoke certain feelings in users, all our experiences differ. Yellow may make one person feel happy while representing danger to another. That said, here are some common color symbolisms in Western cultures:

Red: Love, Passion, Strength, Power, Danger, Excitement, Energy.
Orange: Warmth, Creativity, Adventure, Freshness, Happiness, Attraction, Success.
Yellow: Optimism, Cheer, Happiness, Warmth, Caution, Energy, Intellect.
Green: Nature, Growth, Wealth, Luck, Envy, Freshness, Quality.
Blue: Trust, Calm, Sadness, Peace, Loyalty, Depth, Authenticity.
Purple: Royalty, Nobility, Wisdom, Luxury, Imagination, Mystery, Spirituality.
White: Purity, Simplicity, Innocence, Peace, Cleanliness, Emptiness, Goodness.
Black: Sophistication, Formality, Sorrow, Boldness, Elegance, Death, Mystery.

Cultural Influence

Designers must consider the significance of colors in different cultures. The perception of colors can vary depending on the region where their users are and the customs of that region.

For example, in the 1950s, Pepsi changed the color of its vending machines in Southeast Asia from royal blue to light blue. In this region, the designers did not realize light blue is associated with death and mourning. As a result, Pepsi saw a notable decrease in sales.

Color Blindness

Color blindness affects a considerable portion of the population and presents unique challenges. Forms of color blindness include:

Protanomaly and deuteranomaly: certain shades of green look more red, and vice versa.
Protanopia and deuteranopia: unable to tell the difference between red and green.
Tritanomaly: it’s difficult to tell the difference between blue and green and yellow and red.
Tritanopia: unable to distinguish between blue and green, purple and red, and yellow and pink.

A color blind simulator with three different color schemes. From left to right the color schemes are: red and green, blue and yellow-orange, and yellow and purple. Beneath each color scheme are examples showing how the color scheme might appear to users with deuteranopia, protanopia, and tritanopia. Red and green has poor color contrast for the deuteranopia and protanopia simulations, while blue and yellow-orange and yellow and purple have good contrast. All 3 have good contrast in the tritanopia simulation. — Red and green together create a complementary color scheme. However, people with color blindness perceive these two colors differently. There is very little, or often no, contrast between red and green for people with protanopia and deuteranopia. On the other hand, blue and yellow-orange, and yellow and purple complementary color schemes retain contrast for users with protanopia, deuteranopia, and tritanopia.

© Interaction Design Foundation, CC BY-SA 4.0

If a color scheme primarily relies on colors that color-blind users find challenging, they may miss essential elements. To improve accessibility, designers use:

Colorblind-friendly palettes, such as blue and yellow-orange, and yellow and purple.
User research.
Tools that simulate different types of color vision deficiency.

Color should not be the sole indicator of meaning. If color is the only indicator used for error fields in a form, those with color blindness may not recognize the difference. Designers supplement colors with icons, text prompts, and other visual cues. This way, users with color vision deficiency can still understand the information.

Learn More about Color Harmony

Take our course, Visual Design: The Ultimate Guide, to learn about color theory and other visual elements.

Watch our Master Class, How To Use Color Theory To Enhance Your Designs, with Arielle and Joann Eckstut.

Read more about color theory in Using Color to Enhance Your Design from the Nielsen Norman Group.

Use Adobe Color’s free color wheel tool to play with different color harmonies and schemes.

Read David Nichols’ interactive article, Coloring for Color Blindness.

Questions about Color Harmony

What are some highly cited scientific research about color harmony?

Some highly cited research on color harmony and related topics includes:

Burchett, K. E. (2002). Color harmony. Color Research & Application.

Burchett's publication discusses color harmony and its application, providing insights into the principles and practices of color combination and their visual effects. Its comprehensive exploration of color harmony has influenced researchers and practitioners in the field, making it a valuable resource.

Westland, S., Laycock, K., Cheung, V., Henry, P., & Mahyar, F. (2007). Colour Harmony. Color: Design & Creativity, 1(1), 1–15.

This article explores the main theories of color harmony, addressing the search for its rules and fundamental laws. It thoroughly examines color harmony theory, including historical and systematic concepts, making it a significant contribution to understanding color harmony principles and their applications.

Chevreul, M. E., & Martel, C. (1854). The Principles of Harmony and Contrast of Colours, and Their Applications to the Arts. Longman, Brown, Green and Longmans.

Chevreul and Martel's classic work lays the foundation for the principles of harmony and contrast of colors. Its early exploration of color harmony and its applications to the arts have been influential.

If you’d like to cite content from the IxDF website, click the ‘cite this article’ button near the top of your screen.

What are some recommended books on color harmony?

Some recommended books on color harmony and related topics include:

Leatrice Eiseman. (2017). The Complete Color Harmony, Pantone Edition. Rockport Publishers.

Designers consider this book the only color guide they will ever need. This book provides a complete update with Pantone colors and new text. It is an essential resource for professionals who use color harmony.

Joann Eckstut, & Arielle Eckstut. (2013). The Secret Language of Color: Science, Nature, History, Culture, Beauty and Joy of Red, Orange, Yellow, Green, Blue, and Violet. Black Dog & Leventhal.

Joann and Arielle thoroughly investigate the role of color in every aspect of life on our planet. The book delves into the physics, chemistry, and perception of color and its presence in art and nature.

Josef Albers. (2006). Interaction of Color. Yale University Press.

This book is an essential guide to changing our perception of colors depending on their nearby hues. It explains how colors can appear to morph and change shades depending on how you arrange them. It is a fundamental resource for understanding color theory and harmony.

Johannes Itten. (1973). The Art of Color: The Subjective Experience and Objective Rationale of Color. John Wiley & Sons.

The Art of Color explores color theory, examining the subjective experience and objective rationale of color. Itten, a prominent color theorist, offers clear explanations and illustrations. This book is a valuable resource for artists, designers, and psychologists.

Kassia St Clair. (2017). The Secret Lives of Colour. John Murray.

This book uncovers the surprising history behind the theory of color. It offers a fascinating and in-depth exploration of different shades and tones. It is an influential resource for understanding the cultural and historical significance of color harmony.

What are some of the most common mistakes in color harmony?

Designers use color harmony to transform a good design into a great one. However, navigating the spectrum of colors requires a keen eye and understanding of some common mistakes:

Making color schemes too complicated.
Ignoring contrast.
Neglecting cultural implications.
Disregarding emotional and psychological implications.
Overlooking color blindness.

For an overview of why accessibility is important in design, watch this video from Elana Chapman, Accessibility Research Manager at Fable:

Show Hide video transcript

00:00:00 --> 00:00:30

Accessibility ensures that digital products, websites, applications, services and other interactive interfaces are designed and developed to be easy to use and understand by people with disabilities. 1.85 billion folks around the world who live with a disability or might live with more than one and are navigating the world through assistive technology or other augmentations to kind of assist with that with your interactions with the world around you. Meaning folks who live with disability, but also their caretakers,
00:00:30 --> 00:01:01

their loved ones, their friends. All of this relates to the purchasing power of this community. Disability isn't a stagnant thing. We all have our life cycle. As you age, things change, your eyesight adjusts. All of these relate to disability. Designing accessibility is also designing for your future self. People with disabilities want beautiful designs as well. They want a slick interface. They want it to be smooth and an enjoyable experience. And so if you feel like
00:01:01 --> 00:01:30

your design has gotten worse after you've included accessibility, it's time to start actually iterating and think, How do I actually make this an enjoyable interface to interact with while also making sure it's sets expectations and it actually gives people the amount of information they need. And in a way that they can digest it just as everyone else wants to digest that information for screen reader users a lot of it boils down to making sure you're always labeling
00:01:30 --> 00:02:02

your interactive elements, whether it be buttons, links, slider components. Just making sure that you're giving enough information that people know how to interact with your website, with your design, with whatever that interaction looks like. Also, dark mode is something that came out of this community. So if you're someone who leverages that quite frequently. Font is a huge kind of aspect to think about in your design. A thin font that meets color contrast
00:02:02 --> 00:02:20

can still be a really poor readability experience because of that pixelation aspect or because of how your eye actually perceives the text. What are some tangible things you can start doing to help this user group? Create inclusive and user-friendly experiences for all individuals.

To learn more about accessibility, take our course, Accessibility: How to Design for All.

What are some of the best practices in color harmony?

In design, mastering color harmony is crucial to creating compelling, appealing compositions. Designers understand the interactions, psychological impacts, and cultural significance of different types of color harmony.

Start with a simple color scheme. Expand as needed.
Use high contrast for visibility and readability in text.
Analyze cultural context and the psychological implications of color.
Test and iterate; your first color choice isn’t final.

Michal Malewicz, Creative Director and CEO at Hype4, suggests starting with a simple color scheme:

Show Hide video transcript

00:00:00 --> 00:00:33

If you're starting as a designer, you don't need a lot of colors, just as with fonts. If you're thinking, 'Okay, I have 60 million colors in that little picker, so let's try to use all of them!' that's not really the case. What you really need is a *background color*, a *foreground color* and an *accent color*. And there are some rules that you can then look up on your own later, like the *60-30-10 rule*, which is pretty useful. But, in general, what you need to really remember from this is that you need a *background color*, so in my case it's going to be white.
00:00:33 --> 00:01:03

Then you need a *text color*, which is going to be some sort of black or dark gray, and the *accent color for the important actions*. And one thing that you can actually tweak here is to have that darker color instead of being pure black, add a little bit of that accent color. So, in our case, the blue to it, so it's just going to look a little bit more connected to the blue and it's just going to look better together. So, that's just one way. And you need *three colors* really to pull off most designs.
00:01:03 --> 00:01:31

And you can start adding colors once you feel more comfortable with them. But when you're starting, really just the less colors the better because it's just much harder that way to screw it up. Two of the worst possible color combinations are mixing red with either very saturated blue or very saturated green. And if you look at it more closely depending on the type of screen that you have, you'll see that on the place where they kind of mix together,
00:01:31 --> 00:02:01

that little line becomes a little bit fuzzy. If you look at it a little bit longer, it starts to hurt your eyes in some cases on some screens because this contrast of those colors works really, really bad together. So, if you want to make a Christmas app, for example, there are better ways to do it, but *generally avoid those color combinations* and *always test your colors if they're clashing that way*. So, you can just place one on top of the other and see if that fuzzy line appears on them.
00:02:01 --> 00:02:07

And that's one way to actually test it – you know – *by eye*, just looking at it. If it looks good, then it looks good.

Learn more UI tips from Michal by watching his Master Class, Beyond Interfaces: The UI Design Skills You Need to Know.

What tools are used in color harmony?

Designers and artists use various tools to achieve color harmony in their work. These tools help select and combine colors effectively:

Color Wheel: Essential to understand and choose colors.
Color Palettes: Predefined schemes for harmonious design.
Digital Software: Tools to select harmonious color schemes.
Online Tools: Website and apps to generate color schemes.
Pantone Guides: Ensure color consistency across media.
Physical Swatches: Match and select colors in real-world applications.
Mobile Apps: Capture environmental colors and create palettes.

These tools serve as a guide to mix and match colors effectively. Designers use tools to ensure their final design is aesthetically pleasing while delivering the intended message or mood.

Many AI tools are available to aid in creating color schemes and palettes. Ioana Telenu, Senior Product Designer, AI at Miro, recommends setting aside a few hours each week to test and play with AI tools:

Show Hide video transcript

00:00:00 --> 00:00:31

The stages of the UX process are not singular in offering opportunities for enhancing our ways of working. We can also look into automating side process things such as productivity or collaboration. I would personally start with the parts that we're naturally not very good at or the ones we don't enjoy doing. Who wouldn't be excited to get rid of some of the menial tasks?
00:00:31 --> 00:01:03

So, here are some ideas for using AI in our design work: Creating icons with Midjourney; generating presentations with tools such as Tome or Beautiful.AI; stock imagery with Midjourney, DALL-E, Stable Diffusion; color palettes with Chroma; writing documentation with Notion AI, writing with Grammarly, and many other options. The landscape of AI tools is rapidly changing. So many new capabilities pop up every week. The best best way to explore ways of optimizing your work is to go to
00:01:03 --> 00:01:22

platforms like Futurepedia and see what's new, play around with the tools, learn and experiment on your own. I choose to set aside 2-3 hours in my calendar every week, AI playground time, where I simply experiment as much as I can with whatever I stumble upon. It may be something worth trying.

Our course, AI for Designers, teaches you how to make the most of AI and your human skills to future-proof your career.

What are the 3 basic color principles?

Three of the main principles of color theory are:

The color wheel.
Color harmony.
Color context.

The color wheel is vital for designers to mix colors effectively. Primary colors form the basis for secondary and tertiary hues.

Designers create color harmony using schemes like analogous and complementary, influencing mood and viewer perception.

Color perception varies based on context, culture, and trends. Designers must consider these factors for impactful use.

Understanding color theory aids designers in creating compositions that enhance user experience and emotional impact.

Joan Eckstut, a leading color consultant and author, explains why colors change based on context:

Show Hide video transcript

00:00:00 --> 00:00:31

Let me introduce myself; my name is Joann Eckstut. I am the co-author of *What Is Color? 50 Questions and Answers on the Science of Color*. When I'm not writing, I spend my time working as an interior designer. Today, I would like to discuss with you the transitory nature of color.
00:00:31 --> 00:01:06

There are four primary ways in which colors appear to change or shift. Number 1: Daylight is constantly changing. So, the colors we see change constantly as well. Number 2: Changing a light source changes what colors we see. Number 3: Colors appear to change depending on what colors surround them. And Number 4: Colors that appear to match in one setting do not match in another.
00:01:06 --> 00:01:32

Let's start with number one. Daylight is constantly changing. So, the colors we see change constantly as well. Although we don't necessarily realize it, millions of changes in light happen all throughout the day. Here, it's beautifully illustrated in this time-lapse image of the Statue of Liberty, which takes place just as the Sun sets.
00:01:32 --> 00:02:02

You can see that even in this short period of time there are myriad changes. We could be overwhelmed by this information about constantly changing light, but our brains help us to hold steady. So, for example, when viewing the red house in this illustration, the human brain has no difficulty in seeing it as entirely one red, even though the side in the Sun looks coral and the side in the shade looks maroon.
00:02:02 --> 00:02:31

When you isolate the colors and place them side by side, as in the two swatches here, the coral and the maroon tell a different story. Number 2: Changing a light source changes the colors we see. When we change the light source illuminating a space, the elements in the space reflect *different* wavelengths of light, causing the space and the objects in it to change their color appearance.
00:02:31 --> 00:03:03

For example, daylight emits light evenly across the spectrum, so no particular color is emphasized, while incandescent light emphasizes reds, oranges and yellows, so objects lit in this way emphasize those tones. Fluorescents have an uneven pattern of emissions, giving objects a green or a yellow-green kind of a cast; whereas LEDs are weak in violet, blue-violet and red areas,
00:03:03 --> 00:03:32

but peak in the orange, yellow and green range. In the example that we see here, the pencils on the left, lit in incandescent light, show the red as enhanced and the natural wood as pinker. The penicils in the middle, that are lit with LEDs, slightly neutralize all the colored pencils and the wood appears beige. The pencils on the right, that are lit with fluorescent lights,
00:03:32 --> 00:04:01

are more muted generally and the natural wood appears a light brown. So, the source of the light determines the way colors are perceived. Number 3: Colors appear to change depending on what colors surround them. This phenomenon is known as *simultaneous contrast*. Simultaneous contrast reveals something of utmost importance: Color is not a fixed entity.
00:04:01 --> 00:04:33

Color isn't constructed solely via particular wavelengths of light, but by a larger visual field. Simultaneous contrast can make a color look more saturated, duller, darker, lighter, or some combination thereof, depending on what color it sits next to. In the example seen here, all of the X's are printed in the same color, although they appear to change color as they are paired with different backgrounds.
00:04:33 --> 00:05:05

In the second example, the turquoise-blue in the circle on the left and the bright lime-green in the circle on the right are actually the *same color*. I know this seems impossible at first glance, but I assure you this is true. They *appear* to be completely distinct colors only because the colors they sit next to are different. Number 4: Colors that appear to match in one setting do not in another.
00:05:05 --> 00:05:32

Two materials can appear to be the same matching color under particular lighting, but no longer match when moved to a different light source. This called *metamerism*. For example, a blue carpet and a blue fabric swatch, as seen in this illustration, may look the same when observed in a showroom that is lit with bulbs that are close to daylight in temperature.
00:05:32 --> 00:06:05

*However*, inside a room lit with *incandescent* bulbs, that reflect more red, the carpet may appear to have a more purple cast and no longer match the upholstery fabric as it did in the showroom. This is the bane of every designer's existence: color appearing one way in the showroom, another in the interior where it's going to be used. So, beware! This is due to the different molecular properties of the dyes – say, a vat dye versus a pigment dye –
00:06:05 --> 00:06:20

and the different molecular properties of the fibers – say, a wool versus a nylon. So, now that you are aware of how ephemeral color can be, you will be prepared to work with it.

Our course, Visual Design: The Ultimate Guide, covers color theory and other key design concepts.

What are the best colors for harmony?

Harmonious design colors depend on context and desired emotions. For example, analogous colors create serenity, while complementary colors offer vibrancy. Examples include blue-green-teal (analogous) and blue-orange (complementary) pairings.

Color harmony involves balancing saturation, value, and warmth. Pastel palettes offer calmness, whereas bright, saturated colors suit energetic designs, emphasizing the importance of balance.

Color choice for harmony should consider cultural perceptions and emotional responses. For instance, blue can symbolize trust and calm, while red can suggest passion or urgency.

Designers use color harmony in UX/UI, interior design, and marketing to:

Guide behavior.
Set moods.
Convey brand personality.

Designers try different combinations, make changes based on the situation, and improve their work with the help of suggestions.

Arielle and Joan Eckstut explain how many alleged emotional responses to colors are not based on science. These emotional responses are unreliable indicators of how a color may make someone feel:

Show Hide video transcript

00:00:00 --> 00:00:30

The way in which we talk about the psychology of color also fall into the category of human invention, if not fake news. And unfortunately, there is very little research about how the brain actually responds to color. Most color psychology, quote unquote, “facts” are not based in science. And to understand our responses to color, it's crucial
00:00:30 --> 00:01:01

to look at three different ways color affects our psychology. The first is our biological response. And we do know a bit about how we respond biologically, for example, to red objects. They inspire fear and sexual desire in scientific studies that have been done. We also know some things about how we respond biologically to blue light. It can help us with everything from seasonal affective disorder
00:01:01 --> 00:01:30

to issues with our internal clocks to problems with concentration. The second is our cultural response. For example, in the West, blue is by far and away the favorite color and yellow, the least favorite color. But if you move to the East, yellow climbed to the top of the charts. And these differences have to do with different cultural associations with various colors. And the third is our personal association with color.
00:01:30 --> 00:02:00

So if you happen to have gone to prison and were put in a pink cell, you probably have a pretty negative association with pink. But if you had one of your best nights of your life in this beautiful pink restaurant, you probably have a very positive association. So don't be fooled by claims like peach increases the appetite or green calms you or yellow uplifts you.
00:02:00 --> 00:02:30

These might be true for some people whose personal, cultural and biological responses line up to support these claims, but test a different group of people across the globe or even in the same family, and you might find completely different results. It's not to say that color doesn't affect people. It of course, affects people. And often it's the same color can affect people all at once.
00:02:30 --> 00:02:49

For example, if you put a group of people in a fluorescent yellow room with yellow floor walls and ceilings, I'm sure that group of people is going to feel something. But whether everyone in the room feels the same thing for the same reasons is at this point very hard to prove.

Read our article, UI Color Palette: Best Practices, Tips, and Tricks for Designers, to level up your color selections.

What are the 2 best colors that go together?

When designers select two colors that work well together, they often choose complementary colors. A complementary color scheme consists of two colors that sit opposite each other on the color wheel.

Complementary colors like blue and orange are popular in design for their high contrast and visual harmony. These characteristics draw attention and highlight key elements.

Blue and orange balance each other:

Blue can evoke calmness and stability
Orange can add energy and enthusiasm.

This combination enables a diverse emotional response in design.

With any color scheme, designers consider cultural, accessibility, and contextual implications.

Take our course, Visual Design: The Ultimate Guide, to learn how to use color in your designs.

What is a family of colors called?

Designers refer to a family of colors as a color scheme or palette, selecting harmonious colors for aesthetic appeal in various contexts.

Using color theory, designers create schemes like monochromatic or complementary for unique visual effects and emotional responses in design.

In UI/UX and product design, designers use color palettes for consistency, usability, and branding, enhancing user engagement and product appeal.

Colors have psychological effects; for instance, blue evokes calmness and trust, commonly used in corporate designs.

Designers should choose color palettes considering context, audience, brand identity, and accessibility, ensuring readability and alignment with the design's message.

The use of color is one of many considerations in UI design. Michal Malewicz, Creative Director and CEO at Hype4 gives an overview of UI design and explains how design is not art:

Show Hide video transcript

00:00:00 --> 00:00:30

In general, what you really, really need to learn first, because everything else comes with practice is grid typography, hierarchy, readability and some basic esthetics. But you don't really need to be an artist and design is definitely not art. It's not art because you have a very limited, you know, kind of scope of what you can do and you can't be too creative because that's going to make it unusable.
00:00:30 --> 00:01:03

So a lot of those Dribbble shots are basically artworks and they're just not able to become a real product because they are done in a way to just kind of have like a flashy visual. So we need to understand that. But what I think is the most important thing is the grid and the layout. I often tell the junior designers what I think the UI design really is, because this whole design thing is really, really like created to feel difficult to people. Like, you know, we have those super genius UX designers talking about lengthy processes
00:01:03 --> 00:01:30

and as a junior, we get discouraged. We get like, Oh, I'm not going to learn that ever because I'm not a super genius like they are. But in reality, a lot of the design is basically moving rectangles around. So you take a rectangle and based on some research and some knowledge, you move it to a different position, change the color, change the size, and that's it. And it's all rectangles, even if you're moving ovals because the bounding boxes are rectangular as well.
00:01:30 --> 00:02:03

So if you learn how and why and where to move those rectangles to, you're set to go. And after two years at university, I had a very hands on experience because I could actually walk to a desk and see what people struggled with. And these were the same problems over and over, mostly great problems, some color problems and typography problems. And do you think that this font is good and I'm going to break it to you know, it's not.
00:02:03 --> 00:02:31

So rule one off one because there is basically just one rule of good UI design. You don't want your brain to be working too much because our brains love order. They, they really, really hate chaos and they love order because it's easier for them to process. So if something is well-organized visually, it's just faster to process. So that brain is just working a little bit less. And if something is harder to process and it takes longer visually
00:02:31 --> 00:02:37

to process, then the brain is tired and it's kind of disliking the thing already.

To learn more about UI design, take our course, UI Design Patterns for Successful Software.

How do artists use color harmonies?

Artists use color harmonies for visually appealing, balanced compositions. These harmonies combine colors aesthetically, creating order and balance in art.

Monochromatic harmony uses a single color's variations, offering a soothing, cohesive look.
Analogous harmony employs adjacent colors on the color wheel, found in nature, harmonious and eye-pleasing.
Complementary harmony pairs opposite wheel colors for a vibrant, high-contrast appearance.
Split-complementary harmony, a complementary variation, uses a base color and adjacent complements, reducing tension.
Triadic harmony selects evenly spaced wheel colors, vibrant even with unsaturated hues.
Tetradic harmony uses two complementary pairs, offering a rich, variable color scheme.

Artists apply these mood, message, and emotional response principles, enhancing design effectiveness.

Are you an artist who wants to transition into user experience design? Cory Lebson, author of The UX Careers Handbook, advises how to reframe your past professional experience for UX design.

Show Hide video transcript

Transcript loading…

Our course, How to Create a UX Portfolio, helps you build your UX portfolio from scratch.

Visual Design: The Ultimate Guide

Closes in

day

hrs

mins

secs

booked

Get Weekly Design Insights

Join 315,212 designers who get useful UX / UI Design tips from our newsletter.

Earn a Gift, Answer a Short Quiz!

Question 1
Question 2
Question 3
Get Your Gift

Question 1

What is color harmony in design?

1 point towards your gift

The balanced and aesthetically pleasing interaction of colors.
The exclusive use of primary colors in design.
The use of random colors without any specific pattern.

Question 2

How does color harmony enhance user experience (UX)?

1 point towards your gift

It creates a confusing and chaotic interface.
It incorporates only neutral colors.
It uses balanced and attractive color schemes that draw attention and engage users.

Question 3

What tool helps designers achieve color harmony by showing the relationships between colors?

1 point towards your gift

Color wheel
MS Paint
Text editor

Try Again! IxDF Cheers For You!

0 out of 3 questions answered correctly

Remember, the more you learn about design, the more you make yourself valuable.

Try again with another Topic Definition

Improve your UX / UI Design skills and grow your career! Join IxDF now!

Question 1
Question 2
Question 3
Get Your Gift

Congratulations! You Did Amazing

3 out of 3 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Check Your Inbox

We've emailed your gift to name@email.com.

Improve your UX / UI Design skills and grow your career! Join IxDF now!

Literature on Color Harmony

Here's the entire UX literature on Color Harmony by the Interaction Design Foundation, collated in one place:

Everything You Need To Know About Triadic Colors

Here’s a handy statistic that’s worth remembering: over 60% of people accept or reject new products based on color, and that’s a figure you can think about when you consider the link between colors and products—like, for instance, whenever you think of Coca-Cola, you’ll likely think of red, or McDonald’s with the arches in yellow, or Starbucks with its signature green. It’s no accident that colors and top brands have such a strong relationship, and a big part of design is knowing how to pick the perfect colors, which—by the way—isn’t just about aesthetics but about giving your brand a personality and values, and designers use color schemes both to evoke emotions and to make a lasting impression on users, and customers. One of the techniques designers use to find the best colors for their brands is something called the triadic color scheme—and you can see how to use it to create visuals that make a big impact.

What Is a Triadic Color Scheme?

As you can likely tell from the “tri” in “triadic,” there are three colors involved for any one selection you make—but there’s a specific way to get them, and they’re not ones that sit next to or right across from each other. Triadic colors sit at equal distances from the color wheel—that handy tool that artists and designers have referred to since Sir Isaac Newton invented his color wheel in 1666—so your three triadic colors are equidistant and make an equilateral triangle if you draw joining lines between them.

There’s a nice and easy example of what makes a triadic color scheme—and it’s our three primary colors, red, blue, and yellow—and an important point to remember is that triadic colors make a vibrant color palette. That’s because it means separating each color, no matter what the specific hues are, so as you look around the color wheel, you can land on triadic color combinations such as green, orange, and purple. And if you go into the “mixes” between these hues, you’ll get fascinating and alluring triadic combos of yellow-green, blue-violet, and red-orange, and yellow-orange, red-violet, and blue-green.

Thanks to the many, many online resources that are available, it’s pretty much safe to say that anyone who can dabble or have a go at it can make impressive visuals, even if they don’t have much in the way of artistic talent. Still, with that said, you need to go beyond the area of picking your favorites if you’re going to pick the perfect color combination—and that’s where you’ll need to dive into color theory and design principles so you get things right.

So, what is color theory? It’s the study of how colors work together—especially because some work really well and some really don’t work well—and how the colors you can pick will affect emotions and perceptions whenever people look at the designs you set in front of them. That’s why it’s so critical for you to understand how colors work together if you’re going to reinforce your brand, make your website easy to read and navigate, and—above all—make it visually appealing.

Deep dive into color in this video by Arielle Eckstut, Author of What Is Color? 50 Questions and Answers on the Science of Color.

Show Hide video transcript

00:00:00 --> 00:00:33

Hi. My name is Arielle Eckstut, and I am the author of What Is Color? 50 Questions and Answers on the Science of Color. Color is an incredibly difficult subject, one that encompasses all kinds of categories of science and history and culture – you name it.
00:00:33 --> 00:01:04

But today in about five minutes I'm going to try to answer this question: What is color? And I'm going to do that by starting with yet another question. In the fall, do the leaves change color if no one is there to see them? Take a moment to think about that: Do the leaves change color if no one is there to see them? Now, the *obvious answer* to this question is "Of course they change color
00:01:04 --> 00:01:37

because the color of the leaves are inherent to the leaves themselves." But in fact, that is not true at all, and the answer is a resounding *no*. If there is not a living being with a brain observing those leaves, the leaves do not change color. And the reason for this is that there's no such thing as color without the *eyes* and the *brain*.
00:01:37 --> 00:02:02

So, different brains process visual information differently. And I realized that this idea that color does not exist outside of our perception can be very difficult to swallow. And in fact, our brains go to great lengths to give us all of the colors that we see.
00:02:02 --> 00:02:36

The source of our color vision is in our *retina*, a credit-card-thin sheet of neurons in the back of our eyeballs. And it's actually a part of our brain, our retina. It's the only part of our brain that exists outside of our skulls. And our retina is what we typically associate with sight in general. If I were to ask you, "Why do we have eyes?" most people would say, "So we can see."
00:02:36 --> 00:03:03

But that was actually not the original purpose of our eyes and our retina. The original purpose was to tell us when to be awake and when to be asleep. So, our eyes sensed when it was light out and when it was dark out, and "when" is the most important word here because our eyes, our retinas have three different systems:
00:03:03 --> 00:03:32

the *when system* being the most primitive and the first use of our eyes. The next system is the *where system*, and that tells us where we are situated in the world. Are we right at the edge of a cliff? Are we too close to a potential predator? Or are we too far to reach a berry that is ripe that we would like to eat?
00:03:32 --> 00:04:00

Lastly, we get to our *what system* – the system that designers deal with on a daily basis but the one that is actually *least important* to our visual system. The what system is the system that we use when we are *focusing on something*, whether that be a computer screen or a phone or a face or a road sign. It's also the system that we use to see color.
00:04:00 --> 00:04:30

Color scientist Mark Rea has a great quote that I adore: "Color is a pigment of our imagination." And that really is true. Our imagination plays such a big role when it comes to color. And our brains are constantly taking in information from the outside world to help inform us about what time of day it is, where we are in the world, what we're looking at,
00:04:30 --> 00:04:36

which really gets us to the next question, which is: Why do we see color to begin with?

How to Select a Triadic Color Scheme for Your Design

You’re going to know just how powerful color is in design no matter if you’re a designer who’s starting out or if you’ve been one for a long time—and, from that, you’ll know how vital it is to pick a color scheme that works (as in, makes the best impact on users and keeps anyone from getting confused). Sure, it’s more work to choose a triadic color scheme than it is to use pretty much any other color scheme, but—the good news—it can be far easier to pick a good or great one when you’ve got some handy tips you can count on.

1. Understand the Color Wheel

That color wheel you encountered earlier, it’s pretty important for designers—along with artists—and you’ve got to understand the simple color wheel triads if you’re going to create beautiful color combinations. Aside from that, you’re also going to need to understand primary, secondary, and tertiary color placement on the wheel so you can have a good feel—or reference point—of what is what and what is where and then be able to take things from there.

2. Align Your Color Choices with the Purpose of Your Project

Now you’ve got to look at getting your color choices in line with your end goal, and it’s here where you’ll need to ask a few questions—for example, what feelings do you want to bring out of your users—or viewers—from your triadic color palette? This will need to be in line with what your product or service offers them, like food, travel, banking, healthcare—the list goes on (and can be as long and varied as the range of industries that exist). To be sure, some colors suit some industries or product or service types better than others, but one of the biggest advantages here is that when you’ve got your end goal in mind—as in, what your brand’s message is—it becomes so easy to choose the dominant color.

It’s here where it’s great to check out some examples of how colors suit businesses and industries, and if you want to—for instance—create a fintech app, then you can pick blue as your primary color (or dominant color). Take a look at fintech brands out there and you’ll notice how blue features a great deal, and that’s because blue represents power and trust—key ingredients whenever people are engaging with an organization that handles their money.

So, that’s one color, but there are still two others to address for our triadic combination here, and those other two colors you can bring on board to act as accents or accent colors, and you can bring the saturation level in these colors down so they’re more muted—something that helps make a more cohesive blend with your dominant color.

Just begin with what the purpose of your palette is—be it energy you want to invoke, calmness, or creativity—and take it from there. For example, take the blue you’re thinking about for your fintech app and see which other two colors are equidistant from it on the color wheel; whatever’s appropriate for your brand—and its brand guidelines should have much to say about whether it’s a “traditional” banking color scheme or something with more vibrant verve, maybe to suit a younger target audience. Then, taking things from there, you’d proceed with a trio of colors that evokes the desired feelings.

3. Understand the Emotions Behind Colors

Bold, bright colors make a strong impact, by their very nature, while pastel shades create a calm, unified look—so, as long as you understand the emotions of colors and what your brand is about and how users—and customers—are bound to react to your color choices (a factor that will depend on their culture, too), it can help you create a palette that’s nice and cohesive to your brand.

4. Test the Color Harmony

Once you’ve picked out the three colors, you’re going to have to test them out to see how they work together—and that’s because some combinations might clash or be too much and spell visual overload for whoever sees the design you make—and see if they’ve got enough contrast and that they don't clash. The best way for you to test the triadic color harmony is to create swatches or use an online color tool—and you can find online color tools that can help you explore and visualize different triadic combinations fast, and you’ve got some of the best tools that are available online to check out, such as Adobe Color, Coolors, and Hubspot Color Palette Generator.

5. Test Color Contrast

Another vital thing is accessible design, and while contrast has come up before, you’ve got to make sure that your color choices provide adequate contrast for reading on screen—and it’s something that you’ll need to do so your design complies with legislation for users with disabilities in most countries. For example, most shades of yellow and lighter shades of other colors don’t provide adequate color contrast on a white background—it’s extremely hard to make out what’s going on in a design even for users who don’t have visual disabilities. In any case, go and read the Web Content Accessibility Guidelines for advice and tools for measuring contrast.

Watch this video to learn how to simplify your color palettes.

Show Hide video transcript

00:00:00 --> 00:00:33

If you're starting as a designer, you don't need a lot of colors, just as with fonts. If you're thinking, 'Okay, I have 60 million colors in that little picker, so let's try to use all of them!' that's not really the case. What you really need is a *background color*, a *foreground color* and an *accent color*. And there are some rules that you can then look up on your own later, like the *60-30-10 rule*, which is pretty useful. But, in general, what you need to really remember from this is that you need a *background color*, so in my case it's going to be white.
00:00:33 --> 00:01:03

Then you need a *text color*, which is going to be some sort of black or dark gray, and the *accent color for the important actions*. And one thing that you can actually tweak here is to have that darker color instead of being pure black, add a little bit of that accent color. So, in our case, the blue to it, so it's just going to look a little bit more connected to the blue and it's just going to look better together. So, that's just one way. And you need *three colors* really to pull off most designs.
00:01:03 --> 00:01:31

And you can start adding colors once you feel more comfortable with them. But when you're starting, really just the less colors the better because it's just much harder that way to screw it up. Two of the worst possible color combinations are mixing red with either very saturated blue or very saturated green. And if you look at it more closely depending on the type of screen that you have, you'll see that on the place where they kind of mix together,
00:01:31 --> 00:02:01

that little line becomes a little bit fuzzy. If you look at it a little bit longer, it starts to hurt your eyes in some cases on some screens because this contrast of those colors works really, really bad together. So, if you want to make a Christmas app, for example, there are better ways to do it, but *generally avoid those color combinations* and *always test your colors if they're clashing that way*. So, you can just place one on top of the other and see if that fuzzy line appears on them.
00:02:01 --> 00:02:07

And that's one way to actually test it – you know – *by eye*, just looking at it. If it looks good, then it looks good.

A Step-by-Step Guide to Creating a Triadic Color Scheme

1. Set the Context

Context is fundamental, foundational, and the primary thing you’ve got to decide on before you think about any primary colors, for example—so, what message do you want to convey? What emotions do you want to evoke from users and potential customers who visit the website you’ll make, for example? What mood do you want your triadic color combination to set for anyone who arrives on the design? Different colors evoke different emotions and associations, and red—for instance—can signify passion or danger much of the time. Another thing that will be a deciding factor is the associations, and users in Eastern cultures will more likely view red with connotations of good fortune, for instance, than those in Western cultures will. In any case, your triad colors have got to both align with the purpose and message of your project and mirror what feelings you want to bring out from the users who arrive on the site.

2. Select Lead Color and Identify Complementary Colors

The weightiest decision when you want to form a triadic color combination is to pick your dominant color, and that’s because your lead color is going to set both the tone and the mood of your project—say, our banking website as an example. Besides, the other two colors depend on it and need to work best with it so all three work with each other to maximum effect. So, with all that said, what kind of factors do you need to consider whenever you’re choosing the dominant color?

Emotional impact is the first major thing, since each color has different emotional associations, which are cultural as well as down to the individual—where, say, red may evoke passion, excitement, or hunger, while blue may induce the trust and calmness a bank would need—and you’ve got to choose a lead color that’s in line with the desired emotional impact on your audience for your design.
Brand identity is the other heavy consideration, and if you're selecting a triadic scheme for a brand, the dominant color has got to be in line with the brand’s existing identity—and that’s vital for brand recognition—and so it’ll be something that’s already decided for you in the brand guidelines (or “from corporate”). However, if you’re coming on board to a fresh startup that’s just coming into being, you’ll likely have more input or leeway to decide on a fresh look.

3. Decide Between Primary and Secondary Colors

One more thing for when you’re deciding on what the colors will be—depending on what your design objectives are, you can go for a triad of primary or secondary colors. A primary triadic color scheme will create a vibrant and lively design—something that can jump out more at users—while a secondary triadic color scheme will give you a more subdued and neutral color palette to work with—a better fit for brands with a different kind of message for their users and customers.

4. Check Visual Balance and Harmony

Now that you’ve got the colors picked out (and congratulations if the scheme turns out to be one that works as well as you intend it to!), you’re going to have to adjust the saturation or brightness so that you end up with a visually pleasing combination. You can experiment with different shades and tones—but the key here is "balance" and, in any case, your color choices in this step should be consistent with the message you want to get across to your viewers—or users and customers, to put it in user experience (UX) design terms.

5. Consider Proportion and Hierarchy

Decide on how you want to use the selected triad colors within your design—where the lead color tends to feature the most, while the two triadic colors act as accents or background colors—and you want to guide the user’s eye here, so create a good hierarchy in your design to do that with.

6. Follow the 60-30-10 Rule

The classic 60-30-10 rule is nice and simple—60% of your palette should be a dominant color, 30% should be the secondary color, and 10% should be an accent color—and it’s a time-tested rule for creating a balance and letting users move from one focal point to the next with comfort and ease.

7. Create Design Mockups

Before you commit fully to anything as a final design, you’ve got to try things out, so apply the triadic scheme you intend to use to design mockups or prototypes so that you can see how well it works. For one thing, it will help you determine whether the color scheme you’ve picked meets the objectives of your project; for another thing, it’ll save your sinking a great deal of time and effort (and money, by association) into something that doesn’t work as well as you had hoped at first.

8. Test for Accessibility

Remember to design for accessibility—it’s too vital a thing to overlook, no matter if you’re designing a website, an app, or marketing collateral—and whatever you’re working on, you’ll need to make color choices accessible. It’s so that the broadest possible audience can understand your design—and so that your design complies with legislation for users with disabilities—and you can use contrast-checking tools to make sure that text will be legible for users with disabilities such as color blindness.

Get your free template for “Color Schemes”

Secure form

Name Please provide your name.

We respect your privacy

Please provide a valid email address.

Get free UX design learning material every week

315,212 designers enjoy our newsletter—sure you don't want to receive it?

Great Brand Examples That Use Triadic Color Schemes

There are a wealth of real-life triadic color scheme examples out there, and you can take inspiration from brands who have done it well, such as brands like Burger King, Mozilla Firefox, and Fanta—so it’s more than worth it to have a close look at a couple of examples.

1. Tide

The type of orange or red-orange that American laundry detergent brand Tide has as the dominant logo color represents both zest (or enthusiasm) and freshness—and that’s a suitable choice, since it gives a great sense of cleanliness and revitalization; just what customers are after when they’ve got laundry to do and want great quality. On both sides of the orangey-red band or circle there’s the complementary shade of yellow that sets things off in an effective way—and in terms of the meaning it conveys, it doesn’t just align with cleanliness and freshness but adds a sunny and cheerful aspect to the brand, too.

Then there’s the second complementary color, a type of blue outlined in white, which contrasts with the dominant orange-red and makes for a visually appealing combination that “pops” iconically, as a much-loved brand logo should. But there’s something more than just the aesthetics involved here—remember how blue stands for trustworthiness and reliability, and it’s through this that Tide’s consumers—as well as store-goers and anyone who sees the logo—can feel all the more assured that their laundry is going to get nice and clean and bright when they use Tide products.

2. Airtable

Airtable is a project management software that uses a triadic color scheme, and the logo that it’s got has different triadic colors and tints of the three primary colors—red, yellow, and blue—and you can see how they work together to make up a highly effective look in the logo. Blue is dominant here and a prominent part of the logo, and that’s a fitting thing because blue—as well as its association with reliability in, say, banking—has got a common association with the tech industry.

For the complementary colors, there are a shade of yellow that not only works well with the blue as a contrasting accent to it but carries with it a nice touch of energy and creativity too, and last—but not least—the touch of red, which plays well with the other two colors, pointing forward with energy and creativity in its symbolism while it makes a neat and eye-catching and memorable addition to complete the trio.

Visual skills are paramount for effectively working with color, so learn more about how important they are—and why—in this video.

Show Hide video transcript

00:00:00 --> 00:00:33

I want to tell you why those visual skills are important and why they're not really art-related. So, you don't need to be great at illustration, drawing and anything like that to have better visual skills. And the reason for visual skills and their importance is that right now the attention span of most humans is shorter than a goldfish, and the study done on that was done in the year 2000 or around the year 2000; so, it's been 20 years after that, so it's probably even lower right now. We might be on ... the attention span of an ant.
00:00:33 --> 00:01:00

So, it dropped from 12 seconds to just 8 seconds because we are *bombarded constantly* by stimuli from every direction, and also there is something called *aesthetic usability effect*, which means that if something looks good, it's naturally perceived by people as being more usable – even if it's not. So, if you're doing anything visual, other people are going to look at it, other people are going to see it, and they're going to evaluate it
00:01:00 --> 00:01:06

and pay it enough attention – or not enough attention – depending on how good the visuals are.

How are Triadic Color Schemes Used in Various Industries?

1. Photography

Photographers use triadic color schemes to capture visually striking pictures—something that can help to emphasize the composition and subject of a photograph—and from how photographers use colors equally spaced on the color wheel, they create a natural balance within the frame. For instance, triadic schemes work well in the extreme in landscape photography of colorful markets, street festivals, or gardens in full bloom—check out these in magazines and online; they can be stunning.

Then there’s fashion photography, where photographers use the triadic scheme when they’re shooting portraits—and it’s an approach that extends to clothing, makeup, or backgrounds, and makes for a look that’s visually harmonious. Likewise, in product photography, a triadic color scheme helps capture the essence of the product and bring it that much closer to viewers so they can sense its qualities and imagine how it can benefit them all the better.

2. Movies

On the surface of it—and since we’re looking at designs as more or less “static” things here—you might not think that triadic color combinations could feature in feature films, but, yes, triadic turns up in movies, too. Ang Lee's The Incredible Hulk provides a superb example to capture this (although you’d be far less likely to capture the Hulk if you tried to), and the film’s approach to visual storytelling is distinctive and powerful.

In the still above, you’ll find our main character the Hulk—with his signature green to represent his monstrous and uncontrollable alter ego—and notice how his dominant hue works so well with the purple and orange as the other two colors in this triadic color scheme, a nifty effect.

3. Web design

Nickelodeon’s web design pays attention to its target audience, not least since its UI color palette is neat proof of how the brand keeps in mind children and families, and there’s an iconic way to how Nick incorporates their triadic color scheme—the dominant color of orange, and Nick’s signature bright orange dominates their website. Orange is a great choice because it represents the brand’s lively, energetic, and playful energy, but another nifty point about their color choice is how they capture the users’ attention right away with it, and so prompt excitement and fun through that unique “splat” effect.

Then, the secondary colors of green and blue work as neat complements—colors that people commonly associate with Nickelodeon’s iconic slime and water-themed branding, and it’s a triadic scheme that visually appeals to children and helps get across the sense of entertainment and adventure Nickelodeon is known—and loved—for.

The Take Away

Whenever you want to go for a triadic color scheme, you’ll need to understand color theory, practice, and use creativity to great effect if you’re to make the best use of triadic color combinations and schemes. Along with that, know the purpose of your design, your brand’s message (and brand guidelines), and what feelings you want to bring out from the people who see your design. You can create visually appealing and harmonious designs using a triadic color scheme and have fun on the way, even though it can sometimes take a great deal of thought and effort.

Sure, there’s no one-size-fits-all approach and, to be sure, you’ll need to experiment to find the perfect color combination for your project, but find a triadic color scheme that speaks best to your brand’s target audience, and even beyond, and you may just arrive at an iconic color scheme that becomes ingrained in the public consciousness for many years to come.

References and Where to Learn More

Learn how to design a UI Color Palette.

Learn more about color theory in this topic.

Read this blog post to understand the relationship between Colors and Emotions.

Deep dive into color with this course, User Experience: The Beginner’s Guide.

Learn more about Color Harmony

Take a deep dive into Color Harmony with our course Visual Design: The Ultimate Guide .

In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.

In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs.

In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use.

In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers.

In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.

In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.

Visual Design: The Ultimate Guide

Closes in

day

hrs

mins

secs

booked

All open-source articles on Color Harmony

Everything You Need To Know About Triadic Colors

Here’s a handy statistic that’s worth remembering: over 60% of people accept or reject new products based on color, and

1k shares
3 mths ago

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Color Harmony

What is Color Harmony?

The Basics of Color Theory: Where Does Color Harmony Fit In?

The Color Wheel

Hue, Value, and Saturation

Color Temperature

What Is the Impact of Color Harmony on UX?

Draw Attention and Engage Users

Enhance Usability

Readability

Brand Perception

How to Achieve Color Harmony

What Are the 7 Main Color Schemes?

Monochromatic

Analogous

Complementary

Triadic

Split-complementary

Tetradic

Square (A Variant of Tetradic)

Color Harmony: Key Considerations

Established Color Schemes

Color Symbolism

Cultural Influence

Color Blindness

Learn More about Color Harmony

Questions about Color Harmony

Earn a Gift, Answer a Short Quiz!

Question 1

Question 2

Question 3

Try Again! IxDF Cheers For You!

Congratulations! You Did Amazing

Check Your Inbox

Literature on Color Harmony

Learn more about Color Harmony

All open-source articles on Color Harmony

Everything You Need To Know About Triadic Colors

Open Access—Link to us!

Popular related searches

Filters

Privacy Settings