Develop your own cool color selector using HTML5 Technology

Comments: You have seen the color selector developed using jquery/js. This article will introduce you to using HTML5 technology to implement a better color selector, if you are interested, you may have seen many color selectors developed using jquery/js. Today we will use HTML5 technology to implement a better color selector. Hope you like it!

The Code is as follows:
<! -- Preview element -->
<Div class = "preview"> </div>
<! -- Colorpicker element -->
<Div class = "colorpicker" style = "display: none">
<Canvas id = "picker" var = "1" width = "300" height = "300"> </canvas>
<Div class = "controls">
<Div> <label> R </label> <input type = "text" id = "rVal"/> </div>
<Div> <label> G </label> <input type = "text" id = "gVal"/> </div>
<Div> <label> B </label> <input type = "text" id = "bVal"/> </div>
<Div> <label> RGB </label> <input type = "text" id = "rgbVal"/> </div>
<Div> <label> HEX </label> <input type = "text" id = "hexVal"/> </div>
</Div>
</Div>

The code is very simple. It contains two parts: one click element and one element used to display the color selector.

JavaScript code

The Code is as follows:
$ (Function (){
Var bCanPreview = true; // can preview
// Create canvas and context objects
Var canvas = document. getElementById ('picker ');
Var ctx = canvas. getContext ('2d ');
// Drawing active image
Var image = new Image ();
Image. onload = function (){
Ctx. drawImage (image, 0, 0, image. width, image. height); // draw the image on the canvas
}
// Select desired colorwheel
Var imagesrc = "images/colorwheel1.png ";
Switch ($ (canvas). attr ('var ')){
Case '2 ':
Imagesrc = "images/colorwheel2.png ";
Break;
Case '3 ':
Imagesrc = "images/colorwheel3.png ";
Break;
Case '4 ':
Imagesrc = "images/colorwheel4.png ";
Break;
Case '5 ':
Imagesrc = "images/colorwheel5.png ";
Break;
}
Image. src = imageSrc;
$ ('# Picker'). mousemove (function (e) {// mouse move handler
If (bCanPreview ){
// Get coordinates of current position
Var canvasOffset = $ (canvas). offset ();
Var canvasX = Math. floor (e. pageX-canvasOffset. left );
Var canvasY = Math. floor (e. pageY-canvasOffset. top );
// Get current pixel
Var imageData = ctx. getImageData (canvasX, canvasY, 1, 1 );
Var pixel = imageData. data;
// Update preview color
Var pixelColor = "rgb (" + pixel [0] + "," + pixel [1] + "," + pixel [2] + ")";
Response ('.preview').css ('backgroundcolor', pixelColor );
// Update controls
$ ('# Rval'). val (pixel [0]);
$ ('# GVal'). val (pixel [1]);
$ ('# BVal'). val (pixel [2]);
$ ('# RgbVal'). val (pixel [0] + ',' + pixel [1] + ',' + pixel [2]);
Var dColor = pixel [2] + 256 * pixel [1] + 65536 * pixel [0];
$ ('# HexVal'). val ('#' + ('000000' + dColor. toString (16). substr (-6 ));
}
});
$ ('# Picker'). click (function (e) {// click event handler
BCanPreview =! BCanPreview;
});
$ ('. Preview'). click (function (e) {// preview click
$ ('. Colorpicker'). fadeToggle ("slow", "linear ");
BCanPreview = true;
});
});

As you can see, this is a very short js Code. Use it to create a new canvas and object, and then draw a circular color palette. You can select different color backgrounds. Here we use a parameter to set different options. As follows:

The Code is as follows:
<Canvas id = "picker" var = "1" width = "300" height = "300"> </canvas>
<Canvas id = "picker" var = "2" width = "300" height = "300"> </canvas>
<Canvas id = "picker" var = "3" width = "300" height = "300"> </canvas>
<Pre class = "html" name = "code"> </pre>

Next we will add events: mousemove and click events. JQuery is used to display and hide selector.

The Code is as follows:
$ ('. Preview '). click (function (e) {// preview click $ ('. colorpicker '). fadeToggle ("slow", "linear"); bCanPreview = true ;});

When we move the mouse over the selected object, we need to refresh the information, for example, the current color

The Code is as follows:
$ ('# Picker'). mousemove (function (e) {// mouse move handler
If (bCanPreview ){
// Get coordinates of current position
Var canvasOffset = $ (canvas). offset ();
Var canvasX = Math. floor (e. pageX-canvasOffset. left );
Var canvasY = Math. floor (e. pageY-canvasOffset. top );
// Get current pixel
Var imageData = ctx. getImageData (canvasX, canvasY, 1, 1 );
Var pixel = imageData. data;
// Update preview color
Var pixelColor = "rgb (" + pixel [0] + "," + pixel [1] + "," + pixel [2] + ")";
Response ('.preview').css ('backgroundcolor', pixelColor );
// Update controls
$ ('# Rval'). val (pixel [0]);
$ ('# GVal'). val (pixel [1]);
$ ('# BVal'). val (pixel [2]);
$ ('# RgbVal'). val (pixel [0] + ',' + pixel [1] + ',' + pixel [2]);
Var dColor = pixel [2] + 256 * pixel [1] + 65536 * pixel [0];
$ ('# HexVal'). val ('#' + ('000000' + dColor. toString (16). substr (-6 ));
}
});
$ ('# Picker'). click (function (e) {// click event handler
BCanPreview =! BCanPreview;
});

CSS code

CSS of different color backgrounds:

The Code is as follows:
/* Colorpicker styles */
. Colorpicker {
Background-color: #222222;
Border-radius: 5px 5px 5px 5px;
Box-shadow: 2px 2px 2px #444444;
Color: # FFFFFF;
Font-size: 12px;
Position: absolute;
Width: 460px;
}
# Picker {
Cursor: crosshair;
Float: left;
Margin: 10px;
Border: 0;
}
. Controls {
Float: right;
Margin: 10px;
}
. Controls> div {
Border: 1px solid # 2F2F2F;
Margin-bottom: 5px;
Overflow: hidden;
Padding: 5px;
}
. Controls label {
Float: left;
}
. Controls> div input {
Background-color: #121212;
Border: 1px solid # 2F2F2F;
Color: # DDDDDD;
Float: right;
Font-size: 10px;
Height: 14px;
Margin-left: 6px;
Text-align: center;
Text-transform: uppercase;
Width: 75px;
}
. Preview {
Background: url ("../images/select.png") repeat scroll center transparent;
Border-radius: 3px;
Box-shadow: 2px 2px 2px #444444;
Cursor: pointer;
Height: 30px;
Width: 30px;
}

Hope you like it