A Javascript function to calculate a unique color for any English word.

Colorful-Language.markdown

Colorful Language

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.

License.

index.html

<input type="text" id="string" placeholder="Type anything" onkeyup="colorful_language(event, document.body)"/>

script.js

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+"%);");
	}
}

style.css

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;
}