Paint Mixer

Here is another paint mixer script. Unlike my Watercolour Mixer, this script works only with solid primary and secondary colours and not "watered down" colours. Each click on a colour corresponds to an equivalent sized load of paint that is added to however many lots of paint have already been added to the mixing area. The colour of the mixing area is then changed to reflect the addition of this unit of colour to how ever many units of colour have previously been added to the area (so mixing one lot of yellow to five lots of red will give a different result than if you used just one lot of each). The number of portions of each primary colour are displayed at the top right corner of each.

The only way to remove paint from the mixing area is to either click on the mixing area or the reset button and start over from the beginning.

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


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

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

Next you need to copy the following HTML and paste it into the body of web page where you want the Paint 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 paint.js.


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

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


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow