Demo of R G B colour slider to get Hex value for background color using JQuery
CSS
<style>
.c {
color: #006;
background-color: #aaa;
font-size: 25px;
padding: 1em;
text-align: center;
width: 80px;
height: 80px;
}
</style>
HTML
<div class="row">
<div class="col-md-4"><div id='d_r'>0</div> <div id="slider_r"></div></div>
<div class="col-md-4"><div id="c_r" class='c'>R</div></div>
</div>
<div class="row"><br>
<div class="col-md-4"><div id='d_g'>0</div> <div id="slider_g"></div></div>
<div class="col-md-4"><div id="c_g" class='c'>G</div></div>
<div class="col-md-4"><div id='d_rgb'>0</div><div id="c_rgb" class='c'>RGB</div></div>
</div>
<div class="row">
<div class="col-md-4"><div id='d_b'>0</div> <div id="slider_b"></div></div>
<div class="col-md-4"><div id="c_b" class='c'>B</div></div>
</div>
JQuery
<script>
$(document).ready(function() {
var rc=0;
var gc=0;
var bc=0;
var rc_h=0;
var gc_h=0;
var bc_h=0;
function rgb(){
/////// Hex value //////
rc_h=rc.toString(16);
gc_h=gc.toString(16);
bc_h=bc.toString(16);
$('#d_rgb').html(rc +"," + gc + "," + bc + ": HEX Value -> " + rc_h +gc_h + bc_h);
$( "#c_rgb" ).animate({ backgroundColor: "rgb( " + rc + ", "+gc+","+bc+")"},1);
}
//////////Red////////////////
$(function() {
$( "#slider_r" ).slider({
range: "max",
min: 1,
max: 255,
slide: function(event, ui) {
rc=ui.value;
$('#d_r').html(ui.value);
$( "#c_r" ).animate({ backgroundColor: "rgb( " + rc + ", 0,0 )"},1,rgb);
}
});
});
///////////////
//////////Green////////////////
$(function() {
$( "#slider_g" ).slider({
range: "max",
min: 1,
max: 255,
slide: function(event, ui) {
gc=ui.value;
$('#d_g').html(ui.value);
/////// Hex value //////
rc_h=rc.toString(16);
gc_h=gc.toString(16);
bc_h=bc.toString(16);
$( "#c_g" ).animate({ backgroundColor: "rgb( 0, "+ gc + ", 0 )"},1,rgb);
}
});
});
///////////////
//////////blue////////////////
$(function() {
$( "#slider_b" ).slider({
range: "max",
min: 1,
max: 255,
slide: function(event, ui) {
bc=ui.value;
$('#d_b').html(ui.value);
$( "#c_b" ).animate({ backgroundColor: "rgb( 0, 0, " + bc + ")"},1,rgb);
}
});
});
///////////////
////////////////
})
</script>