Calculate difference in percentage between 2 hex colors

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>

    <span>Credit to: Tiago Dias aka <a href="https://gist.github.com/krypton/2400088" target="_blank">krypton</a></span>
    <form>
      <div class="row"><span class="color-block color1-block"></span><input id="color1-input" name="color1-input" placeholder="#6D161C" value="#6D161C" onKeyup="parseTextColor()" onBlur="parseTextColor()" onFocus="parseTextColor()"/></div>
      <div class="row"><span class="color-block color2-block"></span><input id="color2-input" name="color2-input" placeholder="#E45E69" value="#E45E69" onKeyup="parseTextColor()" onBlur="parseTextColor()" onFocus="parseTextColor()"/></div>
      <button type="submit">Compare</button>
      <h1>Percentage difference is: <span class="result"></span></h1>
    </form>


  </body>

</html>

body{
  font-family: 'arial';
  .row {
    display: flex;
    margin-bottom: 12px;
  }
  .color-block {
    min-width: 30px;
    min-height: 30px;
    display: inline-block;
    margin-right: 10px;
  }
  h1{
    font-size: 1.4em;
  }
  form {
    margin-top: 30px;
    input {
      display: inline-block;
      padding: .5em;
      font-size: .8em;
      border-radius: .2em;
      border: 1px solid gray;
    }
    button {
      padding: 8px;
      font-size: 1em;
      background-color: white;
      border: 1px solid blue;
      color: blue;
      border-radius: .3em;
      outline: 0;
      cursor: pointer;
      &:hover {
        background-color: darken(white, 7%);
      }
    }
  }
}

function color_meter() {
  
    var cwith2 = $( "#color1-input" ).val();
    var ccolor2 = $( "#color2-input" ).val();
    
    if (!cwith2 && !ccolor2) return;
    
    var _cwith2  = (cwith2.charAt(0)=="#") ? cwith2.substring(1,7) : cwith2;
    var _ccolor2 = (ccolor2.charAt(0)=="#") ? ccolor2.substring(1,7) : ccolor2;
    
    var _r = parseInt(_cwith2.substring(0,2), 16);
    var _g = parseInt(_cwith2.substring(2,4), 16);
    var _b = parseInt(_cwith2.substring(4,6), 16);

    var __r = parseInt(_ccolor2.substring(0,2), 16);
    var __g = parseInt(_ccolor2.substring(2,4), 16);
    var __b = parseInt(_ccolor2.substring(4,6), 16);
    
    var p1 = (_r / 255) * 100;
    var p2 = (_g / 255) * 100;
    var p3 = (_b / 255) * 100;

    var perc1 = Math.round((p1 + p2 + p3) / 3);
    
    p1 = (__r / 255) * 100;
    p2 = (__g / 255) * 100;
    p3 = (__b / 255) * 100;
    
    var perc2 = Math.round((p1 + p2 + p3) / 3);
    
    var result = Math.abs(perc1 - perc2);
    $( ".result" ).text( result );
    $( "h1" ).show();
    
}

function parseTextColor() {
    var cwith2 = $( "#color1-input" ).val();
    var ccolor2 = $( "#color2-input" ).val();
    
    if (!cwith2 && !ccolor2) return;
    
    $( "#color1-input" ).css({ 'color': cwith2});
    $( "#color2-input" ).css({ 'color': ccolor2});
    $( ".color1-block" ).css({ 'background-color': cwith2});
    $( ".color2-block" ).css({ 'background-color': ccolor2});
}

$(document).ready(function() {
  parseTextColor();
  $( "h1" ).hide();
  
  
  $( "form" ).submit(function( event ) {
    event.preventDefault();
    parseTextColor();
    color_meter();
  });
  
  
});