The Math of Smooth Color
How does a computer blend one color into another? It's all math.
How does a computer blend one color into another? It's all math.
Pick two colors. What happens in between them?
Drag the slider to travel through the gradient. At 0% you're at the start, at 100% you're at the end.
The computer calculates every color by mixing start and end based on your position.
Every color is just three numbers: Red, Green, and Blue. Watch what happens to each channel.
A gradient isn't infinite colors—it's a specific number of steps. How many do you need?
With fewer steps, you can see distinct bands instead of a smooth blend.
Each RGB channel has 256 values (0-255). That's why 256 steps looks perfect!
The "banding" you see with few steps is called posterization—the same effect used in pop art!
Linear interpolation spreads colors evenly. Easing creates more of one color, less of another.
Starts slow, ends fast. More start color, quick transition to end.
Starts fast, ends slow. Quick start, lingers on end color.
Smooth S-curve. Gentle transitions at both ends.
With few colors, you see ugly bands. Dithering mixes pixels to fake smooth transitions.
Dithering adds a checkerboard pattern of alternating colors. Your eye mixes them together!
6 colors + dithering looks almost as good as 256—perfect for limited palettes like GIFs!
Old video games used dithering to create the illusion of more colors than the hardware could display!
You now understand how computers create smooth gradients: RGB interpolation, gradient steps, easing functions, and dithering.
Blend colors by mixing their Red, Green, and Blue channels separately.
Position in a gradient (0 to 1) determines how much of each color to mix.
More steps = smoother gradient. 256 steps looks perfectly smooth.
Curved interpolation creates non-linear color distributions.
Adding intermediate colors hides banding with fewer total colors.
Put your new knowledge into practice!