<!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-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" /> 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" /> 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" /> Hex <br /> <input type = "text" id = "hex"/> </div> </div> </div> </body> </html>
$(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 */ });