Re­load demos Made by David Mer­field.

ran­dom­Color

A color gen­er­a­tor for JavaScript.

Get the code on GitHub  →

Why does this ex­ist?

There are lots of clever one-lin­ers for gen­er­at­ing ran­dom col­ors:

'#' + Math.floor(Math.random()*16777215).toString(16);

Un­for­tu­nately, this code nat­u­rally pro­duces murky greys, browns and greens.

ran­dom­Color gen­er­ates at­trac­tive col­ors by de­fault. More specif­i­cally, ran­dom­Color pro­duces bright col­ors with a rea­son­ably high sat­u­ra­tion. This makes ran­dom­Color par­tic­u­larly use­ful for data vi­su­al­iza­tions and gen­er­a­tive art.


Ex­am­ples

Once you’ve in­cluded ran­dom­Color.js on your page, call­ing ran­dom­Color() will re­turn a ran­dom at­trac­tive color. Be­neath is the out­put of ran­dom­Color called 54 times.

randomColor(); // Returned a random color as a hex string

You can also pass an op­tions ob­ject to ran­dom­Color. This al­lows you to spec­ify the hue, lu­mi­nos­ity and the num­ber of col­ors to gen­er­ate.


Sim­i­lar col­ors

randomColor({hue: 'red', count: 18});
randomColor({hue: 'orange', count: 18});
randomColor({hue: 'yellow', count: 18});
randomColor({hue: 'green', count: 18});
randomColor({hue: 'blue', count: 18});
randomColor({hue: 'purple', count: 18});
randomColor({hue: 'pink', count: 18});
randomColor({hue: 'monochrome', count: 18});

Light col­ors

randomColor({luminosity: 'light',count: 27});

Dark col­ors

randomColor({luminosity: 'dark', count: 27});

Truly ran­dom col­ors

randomColor({hue: 'random',luminosity: 'random',count: 54});
Get this on Github  →