Hex with tint

by Jens Kühn

HTML

<form name="entry">
  <div>
  <p><label for="PercentBase">Percentage </label><input name="PercentBase" id="PercentBase" size="2" maxlength="2" value="100">%</p>
    <input name="HexBase" id="HexBase" value="#007ef0" onblur="CalculateTint(this)" type="color">
    <input name="HexBaseStr" id="HexBaseStr" value="#007ef0" size="7" maxlength="7" onkeypress="valHex(event)" onblur="CalculateTint(this)">
  </div>
  <div>
  <p><label for="PercentTint">Percentage </label><input name="PercentTint" id="PercentTint" size="2" maxlength="2" value="50" onkeypress="valNum(event)" onblur="CalculateTint(this)" class="flat">%</p>
    <input name="HexTint" id="HexTint" value="#80BFF8" size="7" maxlength="7" type="color">
    <input name="HexTintStr" id="HexTintStr" value="#80BFF8">
  </div>
</form>

CSS

form {
  display: flex;
}
div {
  margin-right: 50px
}

JavaScript

var hex;

function CalculateTint(control) {
	var str = '';
  if (control.name == "HexBase") {
    with(document.entry) {
      str = HexBase.value;
      if (str.charAt(0) != "#") {
        HexBase.value = "#" + Hexd.value;
      }
      str = HexBaseStr.value = HexBase.value;
    }
  }
  if (control.name == "HexBaseStr") {
    with(document.entry) {
      str = HexBaseStr.value;
      if (str.charAt(0) != "#") {
        HexBaseStr.value = "#" + Hexd.value;
      }
      str = HexBase.value = HexBaseStr.value;
    }
  }
  if (str.length == 4 || str.length == 7) {
        var r = hexToRgb(str).r;
        var g = hexToRgb(str).g;
        var b = hexToRgb(str).b;
        if (PercentTint.value.replace(/\s/g, "") != "") {
          var rt = tintCalc(r);
          var gt = tintCalc(g);
          var bt = tintCalc(b);
          var ht = rgbToHex(rt, gt, bt);
          HexTint.value = HexTintStr.value = ht;
        }
      }
}

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

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

function componentToHex(c) {
  n = parseInt(c, 10);
  if (isNaN(n)) return "00";
  n = Math.max(0, Math.min(n, 255));
  return "0123456789ABCDEF".charAt((n - n % 16) / 16) + "0123456789ABCDEF".charAt(n % 16);
}

function tintCalc(x) {
  return Math.round(((100 - document.entry.PercentTint.value) * .01) * (255 - x) + parseInt(x));
}

function valNum(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if (key != 8 && key != 9 && key != 46) {
    key = String.fromCharCode(key);
    var regex = /[0-9]/;
    if (!regex.test(key)) {
      theEvent.returnValue = false;
      if (theEvent.preventDefault) theEvent.preventDefault();
    }
  }
}

function valHex(evt) {
  var theEvent = evt...