RGB или HUE палитра на сайте

var r = 0; 
var g = 0; 
var b = 0; 
$('input[name=r]').on('input', function(){ 
	r = $(this).val(); 
  $('.color').css('background-color', 'rgb('+r+','+g+','+b+')'); 
  $('output').val('rgb('+r+','+g+','+b+')'); 
}); 
 
$('input[name=g]').on('input', function(){ 
	g = $(this).val(); 
  $('.color').css('background-color', 'rgb('+r+','+g+','+b+')'); 
   $('output').val('rgb('+r+','+g+','+b+')'); 
}); 
 
$('input[name=b]').on('input', function(){ 
	b = $(this).val(); 
  $('.color').css('background-color', 'rgb('+r+','+g+','+b+')'); 
   $('output').val('rgb('+r+','+g+','+b+')'); 
});

.color{ 
  width: 50px; 
  height: 50px; 
  background-color: rgb(0,0,0); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class=color></div> 
<output></output> <br> 
<input class='rgb' type="range" name='r' min='0' max='255' value ='0'> red <br> 
<input class='rgb' type="range" name='g' min='0' max='255' value ='0'> green <br> 
<input class='rgb' type="range"  name='b' min='0' max='255' value ='0'> blue

var r = document.getElementById('r'); 
var g = document.getElementById('g'); 
var b = document.getElementById('b'); 
var r_out = document.getElementById('r_out'); 
var g_out = document.getElementById('g_out'); 
var b_out = document.getElementById('b_out'); 
 
function setColor() { 
  var r_hex = parseInt(r.value, 10).toString(16); 
  var g_hex = parseInt(g.value, 10).toString(16); 
  var b_hex = parseInt(b.value, 10).toString(16); 
  var hex = "#" + pad(r_hex) + pad(g_hex) + pad(b_hex); 
  document.getElementById('block_output').style.backgroundColor = hex; 
} 
 
function pad(n) { 
  return (n.length < 2) ? "0" + n : n; 
} 
 
r.addEventListener('change', function() { 
  setColor(); 
  r_out.value = r.value; 
}, false); 
 
r.addEventListener('input', function() { 
  setColor(); 
  r_out.value = r.value; 
}, false); 
 
g.addEventListener('change', function() { 
  setColor(); 
  g_out.value = g.value; 
}, false); 
 
g.addEventListener('input', function() { 
  setColor(); 
  g_out.value = g.value; 
}, false); 
 
b.addEventListener('change', function() { 
  setColor(); 
  b_out.value = b.value; 
}, false); 
 
b.addEventListener('input', function() { 
  setColor(); 
  b_out.value = b.value; 
}, false);

body { 
  display: flex; 
  font-family: Arial; 
} 
 
div:not(#block_output) { 
  text-align: center; 
} 
 
#block_output { 
  width: 200px; 
  height: 200px; 
  background-color: black; 
} 
 
label, 
output { 
  display: inline-block; 
  min-width: 2.5em; 
}

<div class="wrapper"> 
  <div> 
    <label for="r">R</label> 
    <input type="range" min="0" max="255" id="r" step="1" value="0"> 
    <output for="r" id="r_out">0</output> 
  </div> 
  <div> 
    <label for="g">G</label> 
    <input type="range" min="0" max="255" id="g" step="1" value="0"> 
    <output for="g" id="g_out">0</output> 
  </div> 
  <div> 
    <label for="b">B</label> 
    <input type="range" min="0" max="255" id="b" step="1" value="0"> 
    <output for="b" id="b_out">0</output> 
  </div> 
</div> 
<div id="block_output"></div>