Simple Color Picker Using jQuery

Submitted by razormist on Saturday, March 11, 2017 - 18:07.

In this tutorial we will try to create a simple color picker using jQuery. jQuery is a fast, reliable kind of cross-platform javascript library. It is designed to simplify the traditional way of coding in javascript. This application can also help you decide on what color will you use on designing your on website. So let's now do the coding. Creating the Mark Up To display the color picker will need to create the mark up language, to do that open any kind of text editor(notepad++, etc). Then copy/paste the provided code below and name it 'index.html'

<!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">
                                <a href = "https://sourcecodester.com" class = "navbar-brand">Sourcecodester</a>
                        </div>
                </div>
        </nav>
        <div class = "row">
                <div class = "col-md-3"></div>
                <div class = "col-md-6 well">
                        <h3 class = "text-primary">Simple Color Picker Using Jquery</h3>
                        <hr style = "border-top:1px dotted #000;"/>
                        <div class = "col-md-6" style = "border:1px solid #000; height:300px; transition: background 100ms;" id = "result">     
                        </div>
                        <div class = "col-md-5 pull-right">     
                                R<input type = "range" min = "0" value = "0" max = "255" step  = "1" id = "red"/>
                                <br />
                                <input type = "number" value = "0" min = "0" max = "255" size = "4" id = "txt_red"  />
                                <br /><br />
                                G<input type = "range"  min = "0" value = "0" max = "255" step  = "1" id = "green"/>
                                <br />
                                <input type = "number"  value = "0" min = "0" max = "255" size = "4" id = "txt_green"  />
                                <br /><br />
                                B<input type = "range" min = "0" value = "0" max = "255" step  = "1" id = "blue"/>
                                <br />
                                <input type = "number"  value = "0" min = "0" max = "255" size = "4" id = "txt_blue"  />
                                <br /><br />
                                Hex 
                                <br />
                                <input type = "text" id = "hex"/>
                        </div>  
                </div>
        </div>
</body>
<script src = "js/jquery-3.1.1.js" ></script>
<script src = "js/script.js" ></script>
</html>

Adding the jQuery Script To add the features of jQuery to HTML form, copy/paste the provided code below and name it 'script.js'

$(document).ready(function(){
 
        /* Range RGB */
        $input_range = $('input[type="range"]');
                $input_range.change(function(){
                        $red = $('#red').val();
                        $('#txt_red').val($red);
                        $green = $('#green').val();
                        $('#txt_green').val($green);
                        $blue = $('#blue').val();
                        $('#txt_blue').val($blue);
                        $('#result').css('background', 'rgb(' + $red +', ' + $green + ', ' + $blue + ')'); 
                        $rgb = 'rgb(' + $red + ', ' + $green + ', ' + $blue + ')';
                        $hex = rgb2hex();
                        $('#hex').val($hex);
                });
        /* End*/
        
        /* Textbox RGB*/
        $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);
        });
        /* End*/
        
        /* Input Hex*/
        $('#hex').change(function(){
                $txt_hex = $(this).val();
                hexToRgb($txt_hex);     
        });
        /* End */
        
        /* rgb2hex*/
        function rgb2hex(rgb) {
                var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
                rgb = $rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
                        function hex(x) {
                                return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
                        }
                return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
        }
        /* End */
        
        /* hex2rgb*/
        function hexToRgb(h)
                {
                        var r = parseInt((cutHex(h)).substring(0,2),16), g = parseInt((cutHex(h)).substring(2,4), 16), b = parseInt((cutHex(h)).substring(4,6),16)
                        return document.getElementById('txt_red').value = r, document.getElementById('txt_green').value = g, document.getElementById('txt_blue').value = b, document.getElementById('red').value = r, document.getElementById('green').value = g,  document.getElementById('blue').value = b, document.getElementById('result').style.background = 'rgb(' + r + ', ' + g + ', ' + b + ')';
                }
        function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
        /* End */
});

There you have it we created a simple color picker app using jquery. I hope that this tutorial help you build your very own application. For more updates and tutorial just kindly visit this site. Enjoy Coding!!

Add new comment

34 views