Demo of R G B colour slider to get Hex value for background color using JQuery

0
R

0
G
0
RGB
0
B




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>