JSFiddle - React, Tailwind, and code Playground

HTML

<p>Enter a name and see the color</p>
<br />
<input type="text" id="inp" />
<br /><br /><br />
<div id="test"></div>

CSS

#test {height: 100px; width: 300px; position: absolute; background: #fff;}

JavaScript

function nameToColor(name) {
    var n = 'abcdefghijklmnopqrstuvwxyz'.split('');
    var r = name.split('').map(function(e) {return n.indexOf(e);}).join('');
    var l = parseFloat( '0.'+ (r*r*1000).toString().replace(/^0/, ''));
    return '#'+Math.floor(l*16777215).toString(16);
}

document.getElementById('inp').onkeyup = function() {
    var clr = nameToColor(this.value);
    document.getElementById('test').style.background = clr;
}