Color palettes are one of the prime resource of a web 2.0 website. There are many color picker codes available online, but they all involve lot of coding and pasting stuff here and there. And some useless CSS and input boxes, which in result mess up the core code. Well here I have designed a simple color picker, which is done using image map instead of span or div technique. Its very basic and really really effective to use.

if you want to use it, please leave a comment with your URL address and you are free to use icon smile Creating a simple color palette or color picker in javascript and html



palette Creating a simple color palette or color picker in javascript and html
Click on any color to view the demo



You can create a bigger or a small picture. Some people find mapping an image a hectic job, but i do it using Dreamweaver. Its really a nice editor for web designers. For the above image, i created it in photoshop and gave some shadow effect and then mapped its co-ordinates using dreamweaver, here is another post which shows you how to create image maps using Dreamweaver

The complete code for the above script is down here icon smile Creating a simple color palette or color picker in javascript and html



palette Creating a simple color palette or color picker in javascript and html

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  

The important part is map name and usemap attribute’s values, please make sure they are same for the respective image and its map. Also when user click the getColor function in JavaScript handles the color code which is there in href attribute, and then it processes it.

Any doubts, feel free to leave a comment.

Cheers!!
Sachin Khosla

Share this post: