<html>
  <body>
    <div class="container">
      <label>Enter your string:</label>
      <input id="seed" type="text" oninput="generateColor()"/>
    </div>
  </body>
</html>
body {
  text-align: center;
  font-family: sans-serif;
  background-color: hsl(0, 100%, 93%);
}

.container {
  margin: 40px;
}

String.prototype.hashCode = function() {
    var hash = 0;
    if (this.length == 0) {
        return hash;
    }
    for (var i = 0; i < this.length; i++) {
        var char = this.charCodeAt(i);
        hash = ((hash<<5)-hash)+char;
        hash = hash & hash; // Convert to 32bit integer
    }
    return hash;
}

var getHashedHue = function(value) {
    return Math.abs(value) % 361;
}

function generateColor() {
  var seed = document.getElementById("seed").value;
  var randomValue = getHashedHue(seed.hashCode());
  var colorString = "hsl(" + randomValue + ", 100%, 93%)";
  document.body.style.backgroundColor = colorString;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.