CodePen

HTML

            
              <a rel="191,17,27" href="#" class="color">Add values</a>

<label>
  RGB value
  <input type="text" class="color-picker-rgb" value="">
</label>

<label>
  Hex value
  <input type="text" class="color-picker-hex" value="">
</label>
            
          
!

CSS

            
              body{font-family:sans-serif;}
label{display:block;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              //RGB to hex
function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

//Slap the rel values into the fields
$('.color').click(function(e) {
  e.preventDefault();  
  
  var rgbVal = $(this).attr('rel');

  var rgbValSplit = rgbVal.split(",");

  for (var i = 0; i < 3; i++) {
    if (!rgbValSplit[i]) {
      rgbValSplit[i] = 0;
    }
  }
  
  var finalHex = rgbToHex(+rgbValSplit[0], +rgbValSplit[1], +rgbValSplit[2]);

  $('.color-picker-rgb').val(rgbVal);
  $('.color-picker-hex').val(finalHex);
  
  $('body').css('background', finalHex);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................