This is a super simple concept that can save you a lot of time if you’re working on anything that involves generating colors dynamically—whether that’s for NFTs, generative art, or procedural design.
It creates a color palette by picking a random starting hue and a random range around that hue on the color wheel. Saturation and lightness can remain constant or vary within their own ranges.
It’s intuitive, flexible, and ensures your results always feel cohesive, even when they’re totally random. I’m calling it the Stella Color Function.
Not only does this function generate harmonious color palettes, but it’s easy to implement and customize its parameters using the example code below.
Stella Color Function Definition
//The Stella Color Function picks random colors
//out of a randomly chosen palette
//based around a random hue.
//(This code chooses random saturation and lightness, too)
function stellaColorFunction(count) {
// Generate a random base hue (0 to 360)
const baseHue = Math.floor(Math.random() * 360);
// Generate a random range for the palette (10 to 360 degrees)
const range = Math.floor(Math.random() * 351) + 10; // Ensures at least a 10-degree range
// Generate the colors
const palette = [];
for (let i = 0; i < count; i++) {
// Choose a random hue within the range
const hue = (baseHue + Math.random() * range) % 360;
// Random saturation and lightness for variety
const saturation = Math.random() * 50 + 50; // 50% to 100%
const lightness = Math.random() * 30 + 40; // 40% to 70%
// Construct HSL color string
const color = `hsl(${hue.toFixed(0)}, ${saturation.toFixed(0)}%, ${lightness.toFixed(0)}%)`;
palette.push(color);
}
return palette;
}
// Example usage: Generate a palette of 5 colors
const colors = stellaColorFunction(5);
console.log(colors);
Stella Color Function Example
The tool above allows you to visualize how the Stella Color Function works. There are 3 pieces to the tool: the color wheel, the example art, and the generate button.
The button generates a new color palette. The section of the color wheel shows all the colors in the palette. The example art picks a few colors from the palette.
This function is extremely versatile and easy to use because all it takes is changing the ranges. If you want a mostly blue piece of art, for example, you can set the hue base angle around a blue you want; then, you can lower the angle range so the palette accepts mostly blues. Lightness and saturation can also be varied for some extra depth within the colors.
