Buddy Colourwheel

Introduction

For a project I am working on, I needed a colourwheel. I looked around and found some on the web, including Colortriangle (Using Canvas) and this colorwheel. Since those guys coud not spell colour and I was in a SVG mood I decided to build my own.

It is pretty basic, but it works if you have a recent browser. Old browser need not apply. If you can see it at the top of this page, your browser is OK. It does not depend on anything.

Usage is pretty straighforward:

colourwheel(elt, size, prefix)

To create a colourwheel.

• elt: the parent DOM element,
• size: the size of the colourwheel. Only one dimension is needed
• prefix: a string. By using a different prefix you can have more than one colourwheel.

set_colour(colour)

To set the colour of the colourwheel. the colour argumentis an array with 3 values

• hue; 0-360
• saturation: 0-100
• value: 0-100

in that order.

get_colour()

Get the current colour. Returns an array [hue,saturation.value]

val()

Same as get_colour()

get_hsl_colour()

Get the current colour as an array with 3 values

• hue; 0-360
• saturation: 0-100
• lightness: 0-100

in that order.

onchange()

Register a callback function. The ne parameter to that callback function is an array [hue,saturation,value]