Colour Handling And Processing In JavaScript

Methods of handling and processing colours are noticeably absent from JavaScript. While colour plays a major role in web design, JavaScript has no built-in objects for the handling and processing of colours. This article describes Colour, a collection of functions that remedies this deficit.

Using Colour

Download one of the files listed above and upload it to your website. As indicated by the comment at the top of each file, the code is released into the public domain and is free to use for any purpose. Link to it from your page with code such as:

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

Creating a Colour object

The Colour function should not be instantiated directly — it is used as a prototype for the three specific colour functions, in order to provide common functionality without duplicating code. To create a Colour object, one of these functions should be instantiated.

RGBColour

RGBColour defines a colour in the RGB (Red Green Blue) colour space. To create an instance of RGBColour, call the constructor with three or four parameters. The first three parameters represent the red, green, and blue components respectively as numbers in the range 0 to 255 inclusive — these numbers do not need to be integers. The optional fourth parameter represents the alpha component as a number in the range 0 (fully transparent) to 1 (fully opaque) inclusive; if this parameter is omitted then it defaults to fully opaque. Values outside of the valid range are clipped to be inside it. For example:

// 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

HSVColour defines a colour in the HSV (Hue Saturation Value, also known as Hue Saturation Brightness) colour space. To create an instance of HSVColour, call the constructor with three or four parameters. The first parameter represents the hue component as a number in the range 0 inclusive to 360 exclusive. The second and third parameters represent the saturation and value parameters respectively as numbers in the range 0 to 100 inclusive — these numbers do not need to be integers. The optional fourth parameter represents the alpha component as described above for RGBColour. Values outside of the valid range are clipped to be inside it, except for the hue which is wrapped (so that, for example, 480 becomes 120). For example:

// 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

HSLColour defines a colour in the HSL (Hue Saturation Lightness) colour space. To create an instance of HSLColour, call the constructor with three or four parameters. The first and second parameters represent the hue and saturation components respectively as described above for HSVColour. The third parameter represents the lightness parameter as a number in the range 0 to 100 inclusive — this number does not need to be an integer. The optional fourth parameter represents the alpha component as described above for RGBColour. Values outside of the valid range are clipped as described above for HSVColour. For example:

// 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

Objects created with the three functions support the same set of functions. These include conversion between colour spaces (directly convert RGB to HSV, RGB to HSL, HSV to RGB, HSV to HSL, HSL to RGB, and HSL to HSV, with the results cached for efficiency). 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,100] 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,100], 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 functions sets the CSS ‘color’ property for the node. The parameter is:

node

the node whose colour should be set

setNodeBackgroundColour(node)

Sets the background colour of the specified node to the colour represented by the Colour object. This functions sets the CSS ‘background-color’ property for the node. The parameter is:

node

the node whose background colour should be set