Watercolour Mixer

Here's a colour mixing script with a bit of a difference from what you normally find on the web. Most of the colour mixers you are likely to find on the web mix red, green, and blue (the three colours you mix together to get all of the millions of colours that can be displayed on the computer screen). Those scripts are fine when you are mixing for the screen but useless when you are trying to work out what will happen if you start mixing paint. (My light mixing script is an equivalent to this one if you are looking for a script that shows the effect of mixing different coloured light together).

Paint mixing involves the primary colours red, yellow, and blue rather than red, green, and blue because we are no longer working with light but rather with the reflective properties of a substance such as paint.

It isn't the purpose of this article to discuss why the primary colours for paint are different from those on the screen. Instead let's move on and look at a demo of the script.

To use the watercolour 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. If you want to simulate the mixing of a different sort of paint then see if the paint mixer script is closer to what you want.

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


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

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

Next you need to copy the following HTML and paste it into the body of web page where you want the Watercolour 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 watercolour mixer added to your web page, all that remains to be done is to copy the Javascript and save it as paintw.js.


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

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


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow