Friday Fork: Colorful Language
Check out the demo on Codepen.
I’m not completely happy with it but for the first attempt at executing something that popped into my head at 4am, I’m pretty happy with it. I would like to see greater variation in the saturation levels and luminosity, though, so I’ll have to keep tweaking it.
If you’re unfamiliar, the hue value is based on a 360 rainbow. 0° is red, 120° is green, 240° is blue, and 360° is back to red. I start my calculation of the hue by changing the starting point from 0°. I do this by taking just the first letter of the word, calculating what percentage “through” the alphabet that letter is, and multiplying that by 360°. An example with the letter “F” (the 6th letter in the alphabet):
Math.floor(6/26*360) = 83;
83° is lime green. We then start spinning the wheel from there. For this I use the ASCII value of the letter. Since the ASCII alphabet starts at 65 (for uppercase letters), I simply add the ASCII value of each letter, minus 64, to the hue rotation value. Let’s say we type the word “flying”:
//hue = 83 see example above
hue += 102-64; //121
hue += 108-64; //165
hue += 121-64; //222
hue += 105-64; //263
hue += 110-64; //309
hue += 103-64; //348
I then perform a modulo on the
hue variable to ensure that our final value is between 0-359.
hue = hue % 360;
This doesn’t affect our result in this case so for the word “flying” we end up with a
hue value of 348°.
Consonants are the meat of a word. Without consonants Theodore Roosevelt would be reduced to “Eooe Ooee”. (Old McDonald had a farm…) Since saturation is what gives colors their kick, I thought it would be a natural fit to use the percentage of consonant saturation to calculate the percentage of color saturation. But, English doesn’t really have words that are all consonants, so we would almost never end up with full saturation, so I had to weight the results. I decided that 95% saturation would be a fine weight. In hindsight, that was probably too high of a bar.
Continuing with our “flying” example:
//"flying" has 5 consonants and 1 vowel
saturation = 5 / 6 / 0.95 * 100; //87.72
I really struggled to come up with a third algorithm for luminosity. I then got thinking about letterforms and had the term “sparkle” come to mind. It’s a phrase that my typography professor at BYU-Idaho used a lot when talking about setting blocks of text. He taught me that different typeface (especially serif typefaces) had a shimmer, or “sparkle”, when viewed from 3 steps back. A lot of that has to do with the shape of the serifs, counters, ascenders, and descenders. (For more info on letterform anatomy, here’s a PDF that has some of the basics.)
In thinking about how they affect the sparkle, I decided that I would treat ascenders as turning up the dimmer, and descenders as turning it down. Luminosity is a little confusing because it is a continuous gradient with three points: black, the hue, and white. So a color with an hsl value of (0, 100%, 50%) is a fully saturated, fully bright red. Adding luminosity to it actually tints it pink. For this reason the starting point of our luminosity calculation isn’t 0% or 100%, it’s 50%. We start with the fully un-tinted color.
I didn’t want to set a fixed value on the increments by which I would be changing the luminosity, so I made it a function of how many letters were in the word. So, for our “flying” example:
increment = 1 / 6 * 50 //8.333
1 is because then each letter in the word has an opportunity to increment the value of the luminosity: one letter is worth 8.333% of the luminosity.
50 is used because it takes 50% in either direction (increase or decrease) to reach the limits of the value (0-100%).
Then for every ascender (t, d, b, l, f, h, k) I add the increment to the luminosity value. For every descender (q, y, p, g, j) I subtract the increment x2 from the luminosity value. I did this simply because I was seeing about twice as many ascenders in the words I was using to test (which was a non-scientific keyboard-pounding free-association exercise).
Back to the example:
//"flying" has 2 ascenders ('f' & 'l')
//and 2 descenders ('y' & 'g')
luminosity = 50;
luminosity += increment * 2; //66.667
luminosity -= increment * 2 * 2; //33.333
So, with the current algorithms, for the word “flying” we get the color