The Toucan’s beak colors represent the aesthetic I’ll discuss in this article: vibrant, lively, and multi-colored. Nope, it’s not gradients.
Welcome to the world of color blends.
What do I mean by ‘color blend’?
Take a look at the Slack logo below.
How many colors are on it? 4? Look closely.
There’s 4 base colors that overlap. Where they overlap, a new color is created: a blend. There are 8 colors.
A color blend is created by intersecting two overlapping colors.
It is, in a sense, the opposite of a gradient. Whereas a gradient is the gradual merging of two colors, a blend is the (visually) sudden and sharp overlap of two distinct colors.
The Slack logo is a colorful image the conveys playfulness, positivity, and interconnectedness. Only a company that doesn’t take itself too seriously would use such a logo.
Slack is a product that is all about connectivity, teamwork, and collaboration. The connectivity in their logo comes across not only from the 4 lines overlapping one another, but from the colors connecting and blending into one another.
Here’s another gorgeous color blend logo:
The RIOgaleão logo conveys movement, energy, and positivity. It does this by using vibrant & interconnected colors.
As an aside, Galeão is the main airport in Rio. 🇧🇷 No surprises there.
Colorful blends add vibrancy and a touch of playfulness to your image and brand
What’s your brand about? What’s your product about? What feeling do you want to convey?
A few weeks ago, I began gathering images for UI inspiration for a side project I am working on (moodboarding). I felt drawn to colorful and vibrant images in my moodboard because that’s the feel of the product I am creating: playful, joyful, and culturally interconnected.
When choosing colors, an essential starting point is to consider what emotions, feelings, and attributes you want associated with the product or brand you’re creating.
As you scroll through the images, consider how the use of colors evokes vibrancy, joy, playfulness, and connectivity, as we saw in the Slack and RIOgaleão examples. I invite you to also consider what other emotions and attributes they convey.
The example above is interesting because the overlapping color blend (the green) is also a gradient. It seems the designer used some kind of a unique gradient to achieve the effect of a color blend. It works. It adds a nice touch to the overall image.
Notice how, in the composition above, the colorful streak carries such a punch already that you don’t need any more colors in the rest of the image. Colorful blends work wonderfully against a muted background.
How to make color blends
If you’re a designer, chances are, you’ve used color blends at some point or another in the past.
In the pre-computer days, designers had to make color blends manually (see incredible examples in the Retro section below). But today, they’re a really basic feature of all design software, including Photoshop, Illustrator, and Sketch.
The basic steps are the same in all design tools:
Step 1 — draw the first object.
Step 2 — draw the second object, placed in such a way that it partially overlaps with the first object.
Step 3 — with the object selected, open the “blend” dropdown menu, and select a blending mode.
Note that depending on what tool or software you’re using, you might need to add more steps to this. In Photoshop, you will need to make a new layer for the second object. Then you change the blending mode of the new layer.
The best thing to do is to play around with different blending modes. You never really know exactly what color you’ll get from each mode, so it’s fun to try. While you’re at it, also play around with the opacity of the objects. If you change the opacity of one of the objects, the color of the resulting blend (the intersect) will also change.
Knowing how to make a color blend is the (really) easy part. The trick is using them in a visually powerful way to create vibrant and stunning images. To do this, you need to apply design fundamentals effectively: the composition, the shapes of your objects, the hierarchy in the layout, good colors, the contrast created by the different objects’ colors, and more. Let’s take a look at some more examples to get your juices flowing.
A note about “pseudo” color blends
See that image I made above? Imagine that I had made a new rectangle of a random color, and just dragged it to fill precisely the overlapping area. Then it would look like a color blend, but it would not in fact be a blend of the 2 overlapping colors (technically speaking).
Sometimes artists do pseudo blends on purpose. In this article, there is one example that looks suspiciously like a pseudo blend. Can you spot which one it is? Post your guess in the comments!
Enough talk! Let’s see some pretty pictures!
Now that you get the basics of color blends, let’s explore some beautiful examples. Time to talk less and look at pretty pictures more.
Retro color blends
Color blends are not a passing fad. These blends from the 50s-70s are proof that good design is timeless.
Let’s take a moment to contemplate how fucking fantastic that image is.
Here it is again over a black background:
The highly vibrant top half of the image is contrasted against the muted bottom half, which has only black, white, and grays.
This creates excellent contrast and allows the colors to pop.
I believe that the above image is by Swiss designer Karl Gerstner, whose works were produced in the 1940s — 1960s. I have not been able to confirm this, however. But he is the author of the image below, which makes him a color blend genius as far as I’m concerned.
This one is from 1957, Karl Gerstner:
This Swissair poster is from circa 1950s-70s.
Not sure when these baggage tags were created, but they’re called “retro tags” on the site, so retro they are:
The poster below from IBM’s award winning Think campaign uses retro style color blends:
IBM’s Think campaign has won Gold at the London International Awards, following on from the Gold Design Lion at Cannes Lions 2012, Bronze Pencil in the One Show Design 2012 Awards, and Silver in Clio Awards 2012. […] Over 200 [poster] submissions were received from offices in New York, Paris, Singapore, London and Brazil. Eighteen were chosen to appear throughout Manhattan on bus shelters and subways, on trains and in wild postings to spur New Yorkers to stop by and visit the exhibit. Source
Geometrical color blends
Because color blends create distinct visual categories (as opposed to gradients which create soft and gradual color categories), they lend themselves well to a geometrical design with round, straight, or angular lines and edges.
Designer Anat Rodan created the CMYK composition below:
You don’t need a tricolor rainbow to create a fantastic color blend, either. Have a look at these gorgeous blend effects created from using just 2 base colors:
If you look into the center of the above Idealism image for 10 seconds, you will enter a deep hypnotic state.
Notice that with “only” 2 base colors, the effect is a bit more subdued (relative to some of the earlier examples), but is none the less striking.
The last 2 get bonus points for still being legible: 2015 EXPO, Huber, and CMYK.
Soft color blends
Here are some color blends that use a softer color scheme.
This one is both a color blend and a gradient!
Here the lines may be hard, but the colors are soft:
Color blends vs. gradients
Color blends and gradients both create a vibrant and modern feel. For this reason, you can use color blends as an alternative to gradients. I think they both look good. Don’t get me wrong, I love gradients too. But which one is the web overly saturated with at the moment, and which one is sadly underutilized? 🤔
So, are you sold on color blends yet?
How might you apply color blends to the design project you’re currently working on? Can you think of some examples of apps or websites that use color blends really well? If so, share in the comments below!
Bonus Question 🌟 ⚽️
Did you catch the football (soccer) reference in this article? If so, post it in the comments. I will be impressed.
If you liked this article, click the ♥️ so others will find it. And follow me for more design topics.
