Easy JavaScript Colour Gradients

RainbowVis-JS is JavaScript library I wrote for colour data visualization. Easily map numbers to a smooth-transitioning colour legend.



0 -> #ff0000
10 -> #ff4d00
20 -> #ff9900
30 -> #ffe500
40 -> #ccff00
50 -> #80ff00
60 -> #33ff00
70 -> #00e619
80 -> #009966
90 -> #004db3
100 -> #0000ff


-0.5 -> #ff0000
-0.4 -> #ff3333
-0.3 -> #ff6666
-0.2 -> #ff9999
-0.1 -> #ffcccc
0 -> #ffffff
0.1 -> #ccffcc
0.2 -> #99ff99
0.3 -> #66ff66
0.4 -> #33ff33
0.5 -> #00ff00

Data Visualization

This is a heatmap-style colouring that represents the relative popularity of Linux distros. Red is hottest and black is coldest.

Linux Distribution Popularity (average hits per day)
Mint 3065
Ubuntu 2170
Fedora 1693
openSUSE 1398
Debian 1365
Arch 1197
CentOS 980
PCLinuxOS 950
Puppy 876
Mageia 770

Canvas Drawing

I drew this with HTML5 Canvas, but the below image is just a screen capture.

Rainbow arc originally drawn with HTML5 Canvas
A working demo of these examples—with source code—are in the example.html file in the github repository.


The Rainbow class by default maps the range 0 to 100 (inclusive) to the colours of the rainbow (i.e., a gradient transitioning from red to yellow to lime to blue).

var rainbow = new Rainbow(); creates new instance of Rainbow. By default, the number range is from 0 to 100, and the spectrum is a rainbow.

rainbow.colourAt(number); returns the hex colour corresponding to the number. If number is out of range, it returns the appropriate hex colour corresponding to either the minNumber or maxNumber.

rainbow.setSpectrum(colour1, colour2 [,colourN]); sets the spectrum of the Rainbow object. By default, the spectrum is a rainbow. You must have a minimum of two colours, but you can specify more than two colours. Colours can be in the form ‘red’, ‘ff0000’, or ‘#ff0000’. For example, rainbow.setSpectrum('red', 'yellow', 'white'); makes the “Rainbow” a colour gradient from red to yellow to white.

rainbow.setNumberRange(minNumber, maxNumber); sets the number range of the Rainbow object. By default, it is 0 to 100.

If you find any bugs, please let me know.

This entry was posted in Development, Programming and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s