Raving Roo DECODED - Tools and Calculators
lynda.com online training tutorials

HTML5 Canvas Hex/RGB Color Picker

This color picker application uses the HTML5 canvas element along with the jQuery .on() event handler to capture color values on mouse hover and mouse click. As you move your mouse over the color box, you will see the "On Hover Color" values update. Left-click the mouse anywhere within the color box, and you will see the "On Click Color" values update.

This is a handy tool for web developers. You can use the tool below, or you can grab the code for your own website.


Get This Script For Your Website


On Hover Color

 

RGB:

HEX:


On Click Color

 

RGB:

HEX:


About The HTML5 Canvas Element

The "canvas" element in HTML5 allows for easy rendering and manipulation of shapes and images within a pre-defined area. Canvas allows for direct manipulation and feedback through mouse actions like hover and clicking. In fact, the HTML5 canvas element is so powerful, that when combined with JavaScript and jQuery, web developers are able to make graphical interactive programs and games with relative ease.