Light Mixer

Computer screens display different colours by mixing different coloured light together. The primary colours for light are red, green, and blue and these are called additive colours. (The primary colours for paint etc are red, yellow, and blue and are called subtractive colours since they subtract colours from the reflected light in order to produce their final colour).

My watercolour script shows how mixing subtractive colours works but I didn't have an equivalent script to show how mixing additive colours works until now. Here is a script that works identically to the watercolour script except that it starts from black and adds light instead of starting from white and adding paint.

To use the light mixer simply click on a colour on the left to add some of that colour to the mixing area. Click on the mixing area or reset button to start over.

Tho add the light mixer script to your page you need to start by copying the following stylesheet and save it as light.css.


This then gets attached into the head of your page using:

<link rel="stylesheet" type="text/css" href="light.css"/>

Next you need to copy the following HTML and paste it into the body of web page where you want the Light Mixer to appear. Note that the script requires JavaScript and so all of the content of the mixer is added from JavaScript so that those without it are not presented with something that doesn't work.

<div id="paintchart"></div>

With the Stylesheet and HTML codes for the paint mixer added to your web page, all that remains to be done is to copy the Javascript and save it as light.js.


The final step is to attach the script to the bottom of your page using:

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


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow