Influencing Mood with Color Combinations

Have you ever wondered, "How do colors affect our moods?" Blue, the world's favorite color, is a go-to choice for many products. However, many people associate blue UIs with boring things for serious people.

So what colors can you add to blue to make it more exciting and appealing to younger people? Go for triadic or tetradic color combinations — 3 or 4 hues equally distant from one another on the color wheel.^[2]

Blue's tetradic colors are pink, yellow, and green. These color combinations tend to be quite vibrant, even when toned down, tinted, or shaded. They can come across as playful and youthful. Make sure to balance these combinations because they can be easily overwhelming, for example, by lowering the color saturation and value.

Magenta is a purplish, pinkish color that has a few different versions. It's located exactly midway between red and blue on the color wheel. Magenta is an extra-spectral color, meaning that it's not associated with a single visible light wavelength.^[3] On its own, it evokes the feeling of mystery and magic.

Magenta also carries a sense of sophistication that you can emphasize by adding other colors. You can keep the color palette monochromatic by using different shades, tints, or tones of the same color. For example, light blue, medium blue, and dark blue. These are all versions of the same hue.

If you want a bit more variety, you can use analogous colors. These are colors that sit next to each other on the color wheel. For example, blue, blue-green, and green. Since they’re close together, they still feel harmonious. Then, add neutrals like grey and black, both of which are considered elegant and sleek.

Bright pink is an engaging and vibrant color that is proven to trigger the release of adrenaline. It feels both energetic and dazzling. So how can we soften such a powerful color?

One way is to create monochromatic pastel palettes. To do this, increase the value of the hue and decrease its saturation.^[4] In the example, adding soft pink colors of varying intensity to the bright dragonfruit pink creates a calmer and more harmonious palette.

Warm colors like yellow, red, and orange are eye-catching and stimulating. To create an energetic color palette, start with a warm color. You can intensify the effect by increasing the color saturation. Just as reducing saturation creates calmer pastels, increasing it produces an energizing effect.

If you don't want to use an analogous color scheme, you can add some complementary colors to create an accent. For example, pair a vibrant orange with a deep blue or a bright yellow with a rich purple. However, make sure the palette is not overwhelming.

This approach is perfect for products and designs meant to evoke excitement, enthusiasm, and activity.

Sometimes, the main brand color is too bright, and designers look for a way to tone it down. Just like with bright red, using monochromatic pastels will have a softening effect. However, blue isn't as energetic as red, so the resulting palette might be too boring. A trick to make it more exciting is adding a tint of its complementary color — in this case, orange. It will add the necessary contrast and make the combination more visually interesting.^[5]

This approach can be particularly effective for corporate and professional websites, technology and SaaS, as well as educational platforms.

A brightly colored palette looks energetic. Bright colors work well when you need to attract attention or inspire energy, excitement, and happiness.^[6] To achieve this goal, use pure saturated colors without adding black, grey, or white.

You can amplify the effect by using triadic colors. For example, if you're starting with yellow, add magenta and cyan to create a vibrant palette that's full of energy.

This approach can be particularly effective for startup websites, productivity apps, online marketplaces, and tourism platforms. 

Overusing muted or neutral colors can make your palette appear dull. How can you remedy that?

Create contrast. It can be a contrasting color or a contrast in saturation — which means adding a brighter color. For example, adding a more saturated lime green to a palette of soft sage or olive tones can bring in the energy it’s missing.

Sometimes we use neutral colors when we don’t know which colors to choose. But neutral colors can do much more than that. They help create harmony between colors as they highlight the rest of the colors and don't compete for attention. They also create more contrast in the design and can alter the overall feel of the palette.

The pure neutral colors are black, gray, and white. Brown and beige are also considered neutrals but are actually variations of orange (which is why they aren't considered pure neutrals). Adding different neutral colors will produce different effects.

For example, adding white to a mostly red palette can make it feel softer and more romantic. But adding black — another neutral color — would make it feel angrier or more passionate.

Neutral and muted colors like deep blues, grays, and blacks convey professionalism and reliability, setting a serious tone. Adding accents of dark greens or burgundy can introduce a touch of sophistication without losing the serious feel. Keeping the color palette monochromatic maintains a clean and cohesive look. Bright, flashy colors can be used as accent elements, but it's important not to go overboard as they can distract from the serious tone. Instead, opt for subtle variations in shades and tints to add depth and interest without overwhelming users. Corporate websites, finance and banking apps, government and public sector sites, and healthcare platforms can benefit from these color combinations.