Generative Color Modulation

Imagine you were painting a picture. Each time you add an object to the canvas — say, a red square — the color will be slightly different. The paint itself may not change, but your pressure on the canvas/amount of paint on the brush probably will, leading to subtle differences across the piece.

When working on a computer, we trade this beautiful organic variance for super-fast rendering. Luckily for us, though, we can simulate it in just a few lines of code. Here’s one way to do it.

---

First, we should choose a human readable color space (such as HSL) to work in. Then, we can define our colors using JavaScript objects:

const baseColor = {
  h: 240,
  s: 75,
  l: 75,
};

Next, we can create a small function that receives a color object and returns a “modulated” version. Here’s what this function could look like:

function modulateColorHSL(baseColor, hRange = 8, sRange = 8, lRange = 8) {
  // pick a random number in a given range
  const random = (min, max) => Math.random() * (max - min) + min;

  // return a new color object
  return {
    // add or subtract a random amount to each color property
    h: baseColor.h + random(-hRange, hRange),
    s: baseColor.s + random(-sRange, sRange),
    l: baseColor.l + random(-lRange, lRange),
  };
}

Using this function, each time we use a color in a composition, we can change it just a little. Here’s how we might apply it:

const modulatedColor = modulateColorHSL(baseColor, 12, 12, 12);

const modulatedColorString = `hsl(
  ${modulatedColor.h}, 
  ${modulatedColor.s}%, 
  ${modulatedColor.l}%
)`;

Lovely! To wrap things up, here’s a CodePen showing off the effect:

Try toggling the color modulation on/off. The difference is subtle, but the slight variance adds a lot to a piece.