We briefly discussed how to manipulate colors in Computing Colors. On this page, we will look more into the different ways of what we do quite often in making pictures and graphics - mixing colors. With code, we can emulate, experiment, and explore how colors combine beyond the limitations of the traditional palette and brush.


At their core, colors on digital platforms are mere numbers. Although our eyes and brains perceive colors in a certain way, we can program various models and interpretations of these numbers. As a result, the output can range anywhere from realistic to surreal.


Your paints don’t have to follow the reality

Your paints don’t have to follow the reality あなたの絵具が現実に従う必要はありません

Mixing RGB Colors


Let's start by mixing colors represented by RGB values. This is the most straightforward method because RGB aligns very well with how most of our screens display colors, as every pixel on these screens consists of tiny bits of red, green, and blue lights. Mixing colors in the RGB space is also a pretty good approximation of blending lights in the real world. You can read more about how our perception of light relates to the RGB color model in the Spectrum and Cones.


<aside> 💡 Note that, however, since most display devices are gamma-corrected, the RGB values are not directly proportional to the brightness of the pixel. ただし、ほとんどのディスプレイデバイスはガンマ補正されているため、RGB値とピクセルの明るさは単純には比例しません。


You can mix two RGB colors by simply interpolating each of RGB channels.


// p5js already has the lerp function implemented, but just to be explicit.
function lerp(v0, v1, t) {
	return v0 * (1 - t) + v1 * t;

function rgbLerp(ca, cb, t) {
return {
    r: lerp(ca.r, cb.r, t),
    g: lerp(ca.g, cb.g, t), 
    b: lerp(ca.b, cb.b, t)