ARTICLE :
 

Html Color Picker using Javascript and CSS to change the color of an image

by SBajra on May 11th, 2011

Introduction

This article illustrates how to create Html based color picker using just JavaScript and CSS to change the color of any image.

Background

There are many times in web development when we need a nice color picker together with preview of the color chosen. For example, you are designing website for interior decoration and you need a color picker to visually display the color of the room as someone picks the color. This article is to design such a dynamic color picker which will change the color of an image using just Html, JavaScript and CSS.

Detail

This html color picker works with plain html, few lines of JavaScript and few lines of cascading style sheet (CSS).

The objective is to create a color picker which will visually change the color of preview image.

Here is the main trick:

Step 1:
Create a preview image that you want to change color dynamically. For this, first get or create an image for which you want to change the color dynamically (For this example, my image only uses just black and white color). Delete the areas of preview image where you want to paint/change color dynamically using any photo editing tool like Paint.NET (which is free) or Photoshop. Then save the image as PNG or GIF file with transparency so that those deleted areas becomes transparent background.

Step 2:
Create a color palette picker. For this illustration, I created a color palette picker using plain html table filled with various colors:

Html code for creating color palette picker table:

<table id="tblColorPalette" border="1" cellpadding="0" cellspacing="0" class="colorPicker">
	<tr>
		<td style="background-color:red;" onmouseover="colorPicker_OnMouseOver('red')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('red')" title="Red"></td>
		<td style="background-color:green;" onmouseover="colorPicker_OnMouseOver('green')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('green')" title="Green"></td>
		<td style="background-color:black;" onmouseover="colorPicker_OnMouseOver('black')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('black')" title="Black"></td>
		<td style="background-color:white;" onmouseover="colorPicker_OnMouseOver('white')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('white')" title="White"></td>
		<td style="background-color:brown;" onmouseover="colorPicker_OnMouseOver('brown')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('brown')" title="Brown"></td>
		<td style="background-color:beige;" onmouseover="colorPicker_OnMouseOver('beige')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('beige')" title="Beige"></td>
		<td style="background-color:magenta;" onmouseover="colorPicker_OnMouseOver('magenta')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('magenta')" title="Magenta"></td>
		<td style="background-color:navy;" onmouseover="colorPicker_OnMouseOver('navy')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('navy')" title="Navy"></td>
		<td style="background-color:pink;" onmouseover="colorPicker_OnMouseOver('pink')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('pink')" title="Pink"></td>
		<td style="background-color:tan;" onmouseover="colorPicker_OnMouseOver('tan')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('tan')" title="Tan"></td>
	</tr>
	<tr>
		<td style="background-color:blue;" onmouseover="colorPicker_OnMouseOver('blue')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('blue')" title="Blue"></td>
		<td style="background-color:maroon;" onmouseover="colorPicker_OnMouseOver('maroon')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('maroon')" title="Maroon"></td>
		<td style="background-color:yellow;" onmouseover="colorPicker_OnMouseOver('yellow')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('yellow')" title="Yellow"></td>
		<td style="background-color:gray;" onmouseover="colorPicker_OnMouseOver('gray')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('gray')" title="Gray"></td>
		<td style="background-color:gold;" onmouseover="colorPicker_OnMouseOver('gold')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('gold')" title="Gold"></td>
		<td style="background-color:aqua;" onmouseover="colorPicker_OnMouseOver('aqua')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('aqua')" title="Aqua"></td>
		<td style="background-color:silver;" onmouseover="colorPicker_OnMouseOver('silver')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('silver')" title="Silver"></td>
		<td style="background-color:orange;" onmouseover="colorPicker_OnMouseOver('orange')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('orange')" title="Beige"></td>
		<td style="background-color:olive;" onmouseover="colorPicker_OnMouseOver('olive')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('olive')" title="Olive"></td>
		<td style="background-color:purple;" onmouseover="colorPicker_OnMouseOver('purple')" onmouseout="colorPicker_OnMouseOut()" onclick="colorPicker_OnClick('purple')" title="Purple"></td>
	</tr>
</table>
  

Step 3:
On mouse events of color palette picker, change the color of the preview image using JavaScript. For this behavior: add onmouseover, onmouseout and onmouseclick events to each cell of the color picker table (<td> tag) which will change the color of the preview image.
First set the default selected color as "white"

var selectedColor = "white";
  

OnMouseOver event of the color palette picker table cell, change the background color of preview image using CSS.

function colorPicker_OnMouseOver(color) {
	var imgColorPreview = document.getElementById("imgColorPreview");
	imgColorPreview.style.backgroundColor = color;
}
  

OnMouseOut event of the color palette picker table cell, revert back the background color of preview image to previously selected color using CSS.

 function colorPicker_OnMouseOut() {
	var tblColorPalette = document.getElementById("colorPalette");
	if (tblColorPalette.style.display != "none") {
		var imgColorPreview = document.getElementById("imgColorPreview");
		imgColorPreview.style.backgroundColor = selectedColor;
	}
}
  

OnMouseClick event of the color palette picker table cell, set the background color of preview image to the newly selected color using CSS.

function colorPicker_OnClick(color) {
	var imgColorPreview = document.getElementById("imgColorPreview");
	imgColorPreview.style.backgroundColor = color;
	selectedColor = color;
}
  

Example of hovering on color palette changing the color of the image:


Click here to view the demo

Conclusion

This is how you can easily change the color of the image by just using Html, JavaScript and CSS.

Download

Click here to download source code

Author:

Profile Photo
SBajra
Date: May 11th, 2011

Comments:



Profile Photo
Commented by Dave Smith
on May 16th, 2011 at 11:07:14 EST
nice trick. Thanks for the article.


Profile Photo
Commented by Subir Shakya
on May 16th, 2011 at 20:21:32 EST
is there a way to add colours whose names are not common. say a light greenish colour will light green work? can the html codes like #FFFFFF numbers work?