Color-hash.js or other way to hash string to color string

Hi There:

Can anyone tell me if it would be possible to use this in a Mobile app? color-hash - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

I can't seem to figure out how to. Long story short - I would like to hash text to a color code so that I can have background colors based upon text.

I included in the pre-loaded library list. But I can't seem to figure out how to actually call it.

Thanks for any help!


<!doctype html>
    <meta charset="UTF-8">
     body {
         width: 80%;
         margin: 50px auto;
     h1 {
         color: #333;
     p {
         color: #999;
     input {
         width: 100%;
         color: #777;
         border: none;
         border-bottom: 1px solid #777;
         outline: none;
         font-size: 24px;
         padding: .5em;
         padding-left: 0;
         margin-bottom: 1em;
         box-sizing: border-box;
     ul, li {
         list-style: none;
         padding: 0;
         margin: 0;
     #history li {
         height: 24px;
         line-height: 24px;
         font-size: 18px;
         border-left: 24px solid #000;
         margin-top: 12px;
         padding-left: 12px;
     #history li .text {
         color: #555;
         white-space: pre;
         text-decoration: underline;
     #history li .hex {
        width: 90px;
        display: inline-block;
     #history li .whitespace {
        background: #efefef;
        padding-left: .5em;
    <h1>Color Hash</h1>
    <p>Generate color based on the given string (using HSL color space and SHA256).</p>
    <input type="text" id="str" placeholder="Type Here">
    <ul id="history">
    <script type="module">
        import ColorHash from '';
        var input = document.getElementById('str');
        var historyList = document.getElementById('history');
        var colorHash = new ColorHash();
        const escapeHTML = function(str) {
            return str.replace(/[<>"&]/g, '')
        input.oninput = function() {
            var str = escapeHTML(input.value);
            if (!str) {
            var hex = colorHash.hex(str);
            var li = document.createElement('li');
   = hex;
   = hex;
            li.innerHTML = '<span class="hex">' + hex.toUpperCase() + '</span><span class="text">' + str + '</span>';
            historyList.insertBefore(li, document.querySelector('#history li'));

You need to use custom component,
just paste code above to iframe and try.

I guess I was unclear - I want to be able to do something like {{colorhash(‘mystring’)}} in a background color field. This was all the containers with the same text get the same color.