JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/paper/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<body>
  <div class="col-sm-6 col-sm-offset-3">
    <div class="words-container panel panel-primary center-block">
      <div class="panel-heading">
        <h3 class="panel-title">Text to CSS Color</h3>
      </div>
      <div class="panel-body">
          <input type="text" class="words text-center form-control input-lg" placeholder="Enter some text" />
      </div>
      <div class="panel-footer">
        <div class="row">
          <div class="col-sm-7">
            <strong class="rgb-color"></strong>
          </div>
          <div class="col-sm-5">
            <strong class="hex-color"></strong>
          </div>
        </div>
      </div>
    </div>
    <p class="text-center">By <a href="http://www.sunjay.ca">Sunjay Varma</a> &middot; Based on <a href="http://randomstringtocsscolor.com/" target="_blank">this</a></p>
    <p class="text-center"><a href="https://github.com/sunjay/text-to-color">Fork me on GitHub</a></p>
  </div>

CSS

body {
  -webkit-transition: background-color 300ms ease-in-out;
  -moz-transition: background-color 300ms ease-in-out;
  -o-transition: background-color 300ms ease-in-out;
  -ms-transition: background-color 300ms ease-in-out;
  transition: background-color 300ms ease-in-out;
}

.words-container {
  margin-top: 20%;
  max-width: 250px;
}

.rgb-color, .hex-color {
  display: block;
  text-align: center;
}

@media (min-width: 768px) {
  .rgb-color {
    text-align: left;
  }

  .hex-color {
    text-align: right;
  }
}

JavaScript

$('.words').on('keyup change', function() {
  var text = $(this).val();
  var color = textToColor(text);
  var colorString = "rgb(" + color.join(", ") + ")";
  var hexString = rgbToHex(color[0], color[1], color[2]).toUpperCase();

  $('.rgb-color').text(colorString);
  $('.hex-color').text(hexString);
  $('body').css('background-color', colorString);
  location.hash = "t=" + encodeURIComponent(text);
});

$(window).on('hashchange', function() {
  var parsedHash = /t\=([^&]*)/.exec(location.hash) || [];
  var text = decodeURIComponent(parsedHash[1] || "");
  $('.words').val(text).change();
}).trigger('hashchange');

$('.words').change();

function textToColor(text) {
  var color = [255, 255, 255];

  var thirdTextLength = text.length / 3;
  for (var color_i = 0; color_i < color.length; color_i++) {
    for (var i = color_i * thirdTextLength; i < (color_i + 1) * thirdTextLength; i++) {
      var char = text.charCodeAt(i);
      color[color_i] = Math.floor(color[color_i] + char * 7 / 4 + 32) % 255;
    }
  }

  return color;
}

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);
}