Module
Generate color based on the given string (using HSL color space and SHA256).
Latest
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384<!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 '../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>