Colour handling and processing in JavaScript

While colour plays a major role in web design, JavaScript has no built-in objects for the handling and processing of colours. Colour.js is a collection of JavaScript objects that remedy this shortcoming.

Download Colour.js

Download one of the files below and upload it to your web server.

File Size Description
Colour.js 3,480 bytes Minified version
Colour.src.js 18,401 bytes Full version, with comments

Link to the file using a script element in the head of your page: 

1

<script type="text/javascript" src="Colour.js"></script>

RGBColour

The RGBColour object represents a colour in the RGB (Red, Green, Blue) colour space. Instances of RGBColour can be created using three or four parameters. The first three parameters is the red, green, and blue components respectively, and must be in the range 0 to 255 (but need not be integers). The optional fourth parameter is the alpha component, and must be in the range 0 (fully transparent) to 1 (fully opaque). For example: 

1
2
3
4
5
6
7
8

// Create a bright red
var brightRed = new RGBColour(255, 0, 0);

// Create an exact mid-grey
var midGrey = new RGBColour(127.5, 127.5, 127.5);

// Create a semi-transparent blue
var semitransparentBlue = new RGBColour(0, 0, 255, 0.5);

HSVColour

The HSVColour object represents a colour in the HSV (Hue, Saturation, Value) colour space. Instances of HSVColour can be created using three or four parameters. The first parameter is the hue, and must in the range 0 to 360. The second and third parameters are the saturation and value respectively, and must be in the range 0 to 100. The optional fourth parameter is the alpha component, and must be in the range 0 (fully transparent) to 1 (fully opaque). For example: 

1
2
3
4
5
6
7
8

// Create a bright green
var brightGreen = new HSVColour(120, 100, 100);

// Create an exact one-third brightness grey
var oneThirdGrey = new HSVColour(0, 0, 100 / 3);

// Create a semi-transparent red
var semitransparentRed = new HSVColour(0, 100, 100, 0.5);

HSLColour

The HSLColour object represents a colour in the HSL (Hue, Saturation, Lightness) colour space. Instances of HSLColour can be created using three or four parameters. The first parameter is the hue, and must in the range 0 to 360. The second and third parameters are the saturation and lightness respectively, and must be in the range 0 to 100. The optional fourth parameter is the alpha component, and must be in the range 0 (fully transparent) to 1 (fully opaque). For example: 

1
2
3
4
5
6
7
8

// Create a bright blue
var brightBlue = new HSLColour(240, 100, 50);

// Create an exact two-thirds brightness grey
var twoThirdsGrey = new HSLColour(0, 0, 200 / 3);

// Create a semi-transparent green
var semitransparentGreen = new HSLColour(120, 100, 50, 0.5);

Colour functions

All three types of colour object support the same set of functions. These include conversion between colour spaces — you can directly convert RGB to HSV, RGB to HSL, HSV to RGB, HSV to HSL, HSL to RGB, and HSL to HSV. The functions are:

getRGB()
Returns the RGB and alpha components of the Colour object as an object with r, g, b, and a properties. r, g, and b are in the range [0,255] and a is in the range [0,1].
getHSV()
Returns the HSV and alpha components of the Colour object as an object with h, s, v, and a properties. h is in the range [0,360), s and v are in the range [0,100], and a is in the range [0,1].
getHSL()
Returns the HSL and alpha components of the Colour object as an object with h, s, l, and a properties. h is in the range [0,360), s and l are in the range [0,100], and a is in the range [0,1].
getIntegerRGB()
A variant on getRGB with the r, g, and b properties rounded to the nearest integer. This function is used by getCSSHexadecimalRGB, getCSSIntegerRGB, and getCSSIntegerRGBA.
getPercentageRGB()
A variant on getRGB with the r, g, and b properties in the range [0,100]. This function is used by getCSSPercentageRGB, and getCSSPercentageRGBA.
getCSSHexadecimalRGB()
Returns a string representing the Colour object as a CSS hexadecimal RGB colour value — that is, a string of the form #RRGGBB where each of RR, GG, and BB are two-digit hexadecimal numbers.
getCSSIntegerRGB()
Returns a string representing the Colour object as a CSS integer RGB colour value — that is, a string of the form rgb(r,g,b) where each of r, g, and b are integers in the range [0,255].
getCSSIntegerRGBA()
Returns a string representing the Colour object as a CSS integer RGBA colour value — that is, a string of the form rgba(r,g,b,a) where each of r, g, and b are integers in the range [0,255] and a is in the range [0,1].
getCSSPercentageRGB()
Returns a string representing the Colour object as a CSS percentage RGB colour value — that is, a string of the form rgb(r%,g%,b%) where each of r, g, and b are in the range [0,100].
getCSSPercentageRGBA()
Returns a string representing the Colour object as a CSS percentage RGBA colour value — that is, a string of the form rgba(r%,g%,b%,a) where each of r, g, and b are in the range [0,100] and a is in the range [0,1].
getCSSHSL()
Returns a string representing the Colour object as a CSS HSL colour value — that is, a string of the form hsl(h,s%,l%) where h is in the range [0,360) and s and l are in the range [0,100].
getCSSHSLA()
Returns a string representing the Colour object as a CSS HSLA colour value — that is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,360), s and l are in the range [0,100], and a is in the range [0,1].
setNodeColour(node)
Sets the colour of the specified node to the colour represented by the Colour object. This function sets the CSS ‘color’ property for the node.
setNodeBackgroundColour(node)
Sets the background colour of the specified node to the colour represented by the Colour object. This function sets the CSS ‘background-color’ property for the node.

Where now?

Found this useful? Share it:

Also in JavaScript: