This Javascript will calculate a unique color for any English word typed into it. Currently other alphabets are not supported. Punctuation and white space are ignored.
A Pen by Matt Nicolaysen on CodePen.
-
-
Save jmas/41b49fc97206e8d281903f6145ef6d76 to your computer and use it in GitHub Desktop.
A Javascript function to calculate a unique color for any English word.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input type="text" id="string" placeholder="Type anything" onkeyup="colorful_language(event, document.body)"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function colorful_language(e, target_element){ | |
| var element = e.target; | |
| var string = element.value; | |
| //alert(string.length); | |
| if(string.length === 0){ | |
| target_element.setAttribute("style","background-color: hsl(0, 0, 100%);"); | |
| }else{ | |
| var sanitized = string.replace(/[^A-Za-z]/, ''); | |
| var letters = sanitized.split(''); | |
| //Determine the hue | |
| var hue = Math.floor((letters[0].toLowerCase().charCodeAt()-96)/26*360); | |
| var ord = ''; | |
| for(var i in letters){ | |
| ord = letters[i].charCodeAt(); | |
| if((ord >= 65 && ord <= 90) || (ord >= 97 && ord <= 122)){ | |
| hue += ord-64; | |
| } | |
| } | |
| hue = hue%360; | |
| //Determine the saturation | |
| var vowels = ['A', 'a', 'E', 'e', 'I', 'i', 'O', 'o', 'U', 'u']; | |
| var count_cons = 0; | |
| //Count the consonants | |
| for(i in letters){ | |
| if(vowels.indexOf(letters[i]) == -1){ | |
| count_cons++; | |
| } | |
| } | |
| //Determine what percentage of the string is consonants and weight to 95% being fully saturated. | |
| var saturation = count_cons/letters.length/0.95*100; | |
| if(saturation > 100) saturation = 100; | |
| //Determine the luminosity | |
| var ascenders = ['t','d','b','l','f','h','k']; | |
| var descenders = ['q','y','p','g','j']; | |
| var luminosity = 50; | |
| var increment = 1/letters.length*50; | |
| for(i in letters){ | |
| if(ascenders.indexOf(letters[i]) != -1){ | |
| luminosity += increment; | |
| }else if(descenders.indexOf(letters[i]) != -1){ | |
| luminosity -= increment*2; | |
| } | |
| } | |
| if(luminosity > 100) luminosity = 100; | |
| target_element.setAttribute("style","background-color: hsl("+hue+", "+saturation+"%, "+luminosity+"%);"); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body{ | |
| min-width:100%; | |
| min-height:100%; | |
| height: 100%; | |
| max-height: 100%; | |
| background-color: white; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| input{ | |
| margin: 0 auto; | |
| width:100%; | |
| height:100%; | |
| min-height:100%; | |
| background:transparent; | |
| border:none; | |
| font-size: 3em; | |
| font-family: 'Helvetica', sans; | |
| text-align: center; | |
| } | |
| input:focus{ | |
| outline:none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment