// source http://jsbin.com/tifavagaru

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
body{
  margin:0
}
img{
  position:relative;
}
.pnt{
  position: absolute;
  color:red;
  font-family:sans-serif;
}
.current{
  font-family:monospace
}
.d1{
  padding:20px
}
</style>
</head>
<body>
<div class="img">
<img src="https://pbs.twimg.com/media/B0vhFEbCIAA1TfG.png" class="image"/>
</div>
<input id="c1" type="color" value="#999999"/>

<p class="current"></p>
<div class="d1"></div>
<script id="jsbin-javascript">
function cutHex(h) {
  return (h.charAt(0)=="#") ? h.substring(1,7):h;
}

function hexToB(h) {
  return parseInt((cutHex(h)).substring(4,6),16);
}
var img = $('.img');
function mark(cnt){
  var cntvar = Math.floor( cnt /44);
  var tp = 52 + (27.5 * cntvar);
  var lft = 13 + ( ( cnt * 13 ) - ( ( 44 * 13 ) * cntvar ) );
  img.append('<div class="pnt" style="top: '+tp+'px; left: '+lft+'px">x</div>');
}

var d1 = $('.d1');
var curr = $('.current');
var count = 0;

$('#c1').on('input', function(e) {

var a = $(this).val();
  var b = hexToB(a);
  var c = Math.floor( b / 2 );
  var d = String.fromCharCode(c);
  curr.html('hex: '+a+'<br>B value: '+b+'<br>charCode (B value div by 2): '+c+'<br>Letter: '+d);
  d1.append('<span>' + d + '</span>');
  mark(count);
  count++;
});
</script>

var d1 = $('.d1');
var curr = $('.current');
var count = 0;

$('#c1').on('input', function(e) {

Modified http://code.jquery.com/jquery-2.1.1.min.js to a secure url

https://code.jquery.com/jquery-2.1.1.min.js