First you have to download the jQuery plugin.
Here is the link for the jQuery that i used in this tutorial https://jquery.com/.
Lastly, this is the link for the template that i used for the layout design https://getbootstrap.com/.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> </div> </div> </nav> <div class="row"> <div class="col-md-6 well"> <hr style="border-top:1px dotted #000;"/> <div class="col-md-3"> <div class="col-md-12"> <div class="form-inline" style="text-align:center;"> <input type="number" class="form-control" value="0" min="0" max="255" size="4" id="txt_red" /> <input type="number" class="form-control" value="0" min="0" max="255" size="4" id="txt_green" /> <input type="number" class="form-control" value="0" min="0" max="255" size="4" id="txt_blue" /> </div> </div> </div> <div class="col-md-6"> <br style="clear:both;"/> <br /> </div> </div> </div> </body> </html>
$(document).ready(function(){ $input_text = $('input[type="number"]'); $input_text.change(function(){ $txt_red = $('#txt_red').val(); $('#red').val($txt_red); $txt_green = $('#txt_green').val(); $('#green').val($txt_green); $txt_blue = $('#txt_blue').val(); $('#blue').val($txt_blue); $('#result').css('background', 'rgb(' + $txt_red +', ' + $txt_green + ', ' + $txt_blue + ')'); $rgb = 'rgb(' + $txt_red + ', ' + $txt_green + ', ' + $txt_blue + ')'; $hex = rgb2hex(); $('#hex').val($hex); }); });
In the given code we first call the basic jQuery ready event to signal that the DOM of the page is now ready to be use. And then we bind all the textboxes using the jQuery method and use the change() function, this function can allow you to manipulate an element when a bind element has been change. To change the background color we just simply append the value of the textboxes into the css color value.
The How to Create Color Picker in HTML using jQuery source code that I provide can be download below. Please kindly click the download button.
There you have it we successfully created How to Create Color Picker in HTML using jQuery. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
More Tutorials for JavaScript Language