colormotion

colormotion is a JavaScript library that generates dynamic color palettes. Its primary use case is for generating color palettes that change over time, such as for animations or visualizations in LED art.

Compatible with Node.js and browser environments.

It supports many different color interpolation methods:

• RGB
• LAB
• LRGB
• HSL
• LCH
• HSV
• HSI
• HCL

It uses the chroma.js library under the hood for color interpolation.

Check out the interactive docs here.

Installation

Install the colormotion npm module using your favorite package manager:

npm install colormotion
# or
# pnpm install colormotion
# or
# yarn add colormotion

Quick Start

Import the Theme class from colormotion using CommonJS or ES modules:

// CommonJS
const { Theme } = require('colormotion');

// ES modules
import { Theme } from 'colormotion';

Create a new theme instance:

const theme = new Theme();

Create a new theme instance with 5 random colors:

const theme = new Theme({
    nColors: 5,
});

Create a new theme instance with 5 random colors and 1024 steps:

const theme = new Theme({
    nColors: 5,
    nSteps: 1024,
});

Create a new theme instance with specific colors:

const theme = new Theme({
    colors: ['red', 'green', 'blue'],
});

Supposing we have some draw loop, we can use the theme to generate colors for our LEDs:

function draw() {
    // Suppose we have an LED strip with 100 LEDs
    for (let i = 0; i < 100; i++) {
        const color = theme.getColor(i);
        // Set the color of the i-th LED to `color`
    }

    // Advance the theme to the next frame
    theme.tick();
}

Easily set a new color palette, to which the theme will gradually transition.

// Set an entirely new color palette
theme.setColors(['red', 'green', 'blue']);

// Set a new color palette using an input color as a seed
theme.randomFrom('#662c91');

// Set a completely random palette
theme.randomTheme();

// Rotate a new color into the palette and drop the oldest color
theme.rotateColor('#17a398');

// Rotate a new random color into the palette and drop the oldest color
theme.rotateRandomColor();

Change the interpolation mode, generating a different set of intermediary colors, to which the theme will gradually transition.

// Set the interpolation mode to LAB
theme.setMode('lab');

// Rotate the interpolation mode
theme.rotateMode();

Update all options at once while still smoothly transitioning.

theme.update({
    colors: ['red', 'green', 'blue'],
    mode: 'rgb',
});

Set the overall brightness of the theme (0 to 1).

theme.brightness = 0.6;

Seen in the Wild

• Dumpy Fuego @ Burning Man