Colour #6: Gradients

Two colours, and everything in between

Smoothly transitioning from one colour to another is called a gradient. You will find gradients everywhere on the web.

Gradients are linear interpolation

We can achieve gradients in RGB via linear interpolation. Say your two colours have red channels 10 and 70, and you want to interpolate between them via a “knob” that goes from 0 to 1. Then the formula goes:

red = knob * 70 + (1 - knob) * 10

Basically: Take knob percent from the second colour, and the rest from the first. Do the same for green and blue, and you have a gradient.

Gradients are line segments

Geometrically speaking, a gradient is just a line segment through the RGB cube (or other colour spaces), where the two endpoints are the two colours we want to transition between. Each point along the line segment corresponds to a colour in the gradient.

The linear interpolation formula from before is just a way to find the coordinates of a point along that line segment.