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

App Building
1

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 https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.2/color-hash.js in the pre-loaded library list. But I can't seem to figure out how to actually call it.

Thanks for any help!

Daren

2 

<!doctype html>
<head>
    <meta charset="UTF-8">
    <style>
     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;
     }
    </style>
</head>
<body>
    <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">
    </ul>
    <script type="module">
        import ColorHash from 'https://zenozeng.github.io/color-hash/dist/esm.js';
        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) {
                return
            }
            var hex = colorHash.hex(str);
            var li = document.createElement('li');
            li.style.borderLeftColor = hex;
            li.style.color = hex;
            li.innerHTML = '<span class="hex">' + hex.toUpperCase() + '</span><span class="text">' + str + '</span>';
            historyList.insertBefore(li, document.querySelector('#history li'));
        }
    </script>
</body>

image
image1406×760 48.9 KB

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

3

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.