Mixing Colors with `mix()`: Creating Smooth Color Transitions

So far in this series, we have learned how to paint the screen one color and how to create gradients using UV coordinates.

Those gradients worked because the color gradually changed from one side of the screen to the other.

But what if you want to blend two completely different colors together?

Instead of fading from black to red, imagine blending blue into purple, orange into pink, or green into yellow.

The GLSL function that does this is called mix().

It is one of the most useful functions you will ever learn.

Before You Continue

If you have not read them yet, start here first.

Part 1: Your First Shader: Painting the Entire Screen One Color

Part 2: Understanding UV Coordinates: The Secret Behind Every Shader

Part 3: Your First Gradient: Using UV Coordinates to Paint Space

Now we are ready to blend colors together.

What Is mix()?

The mix() function smoothly blends one value into another.

Its structure is very simple.

mix(firstValue, secondValue, amount)

Think of it like this.

• The first value is where you begin.
• The second value is where you finish.
• The third value tells GLSL how far between them you want to be.

The third value is usually called t.

Understanding the Third Value

Let's imagine we are blending red and blue.

vec3 red = vec3(1.0, 0.0, 0.0);
vec3 blue = vec3(0.0, 0.0, 1.0);

Now we try different values.

mix(red, blue, 0.0)

The result is completely red.

Now try

mix(red, blue, 0.5)

Now the result is exactly halfway between the two colors.

Finally,

mix(red, blue, 1.0)

Now the result is completely blue.

You can think of it like this.

0.0 ----------- 0.5 ----------- 1.0

Red          Purple           Blue

Our First Shader Using mix()

Now let's use vUv.x as the amount.

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUv;

void main() {

    vec3 leftColor = vec3(0.0, 0.3, 1.0);

    vec3 rightColor = vec3(1.0, 0.2, 0.5);

    vec3 color = mix(leftColor, rightColor, vUv.x);

    gl_FragColor = vec4(color, 1.0);

}

The left side of the screen starts with blue.

The right side slowly becomes pink.

Every pixel between them receives a slightly different blend.

That creates a smooth color transition.

Why Use vUv.x?

Remember what we learned in the previous lesson.

vUv.x starts at 0.0 on the left side of the screen and increases until it reaches 1.0 on the right.

That makes it the perfect value for blending colors.

At the left edge,

vUv.x = 0.0

Only the first color appears.

At the right edge,

vUv.x = 1.0

Only the second color appears.

Everything between those points becomes a smooth blend.

Creating a Vertical Blend

Simply replace vUv.x with vUv.y.

vec3 color = mix(leftColor, rightColor, vUv.y);

Now the colors change from the bottom of the screen to the top.

The only thing that changed was the value controlling the blend.

You Can Blend Anything

Although we are blending colors here, mix() is not limited to colors.

It can also blend numbers.

For example,

float value = mix(2.0, 10.0, 0.5);

The result is

6.0

This makes mix() useful for animations, movement, brightness, transparency, distortion, and many other shader effects.

Try Different Color Combinations

Ocean

vec3 a = vec3(0.0, 0.2, 0.8);
vec3 b = vec3(0.0, 0.9, 1.0);

Sunset

vec3 a = vec3(1.0, 0.4, 0.1);
vec3 b = vec3(0.9, 0.0, 0.6);

Forest

vec3 a = vec3(0.0, 0.3, 0.0);
vec3 b = vec3(0.4, 0.9, 0.2);

Neon

vec3 a = vec3(0.0, 1.0, 1.0);
vec3 b = vec3(1.0, 0.0, 1.0);

Swap different colors and see what happens.

You will quickly discover combinations you like.

A Small Challenge

Try creating these gradients.

• Blue into white.
• Black into orange.
• Purple into cyan.
• Green into yellow.

Can you make the transition run from top to bottom instead of left to right?

What We Learned

The mix() function takes two values and smoothly blends between them.

By using vUv.x or vUv.y as the blending amount, we can create beautiful color gradients with very little code.

This function appears in almost every shader because smooth transitions are everywhere in computer graphics.