noise grid
January 6, 2022

Color Modulation — Generative Snacks!

Hey! Welcome to ✨ Generative Snacks ✨, a collection of tiny-yet-delicious generative art tips and tricks. 🍪

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” (modified) 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(

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

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

Enjoy! 🍪