Saturday, March 28, 2015

js quickie: random pastels

I found a page with some too clever by half random hex color generators but I know from experience that forcing things to be pastels leads to less of a "angry fruit salad" effect, so here's my modification of their code to constrain it to pastels:

function randomPastel(){
    return '#' + (function co(lor){   return (lor += ['a','b','c','d','e','f'][Math.floor(Math.random()*6)])&& (lor.length == 6) ?  lor : co(lor); })('');

tbh, it's probably not super efficient code (recursion hardly ever is!) and I'm even taken away some of the elegance by wrapping it in a boring-ly named function etc, but hey.


  1. It's hard to distinguish the 2 and 3 bands with tired eyes because they're equally washed out, and if I had r/g color blindness, the 4 and 5 bands would look very similar. I don't know what color model is being used, and I just learned (while trying to fact-check my terms) that HSL and HSV have a much more useful competitor ( except that Lab is also based on ... ugh.

    OK, human color vision comes from the interaction of cone cells capable of detecting short, medium, or long wavelengths. (there are tetrachromats, people who have four flavors of cone cells, who have greater color discrimination, but they're vanishingly rare.) The optic nerve has some cross-wiring built in - all nerve cells have both excitatory and inhibitory inputs - and at some point in the pipe, "red" and "green" are inhibitory of each other, and blue-yellow similarly. When this wiring doesn't work right, we get some of the more common forms of color blindness.

    Red and Blue "beat" against each other (especially in stripes) because there's not as much inhibitory as excitatory cross-talk between those signals so when they're adjacent in the visual composite you have to try to ground one or the other.

    So if a pastel is defined as a particular lightness range in Lab space, then you'd want to try to ensure that adjacent spaces don't have too-similar lightness. 0 and 1 there look to have the same lightness, as do 2 and 3, and maybe 4 and 5. Keeping a minimum difference in lightness should prevent problems where colorblindness can't detect differences, and should also let 'tired eyes' still see the difference between bands when the colors are similarly washed out.

    Does any of this make sense?

  2. It does, and if I were making a more widely used tool, I would put more care into thinking about color blind contrast. This thing still "kinda" works even if each block is the same color, the subtle difference is meant to be a small reminder, so I'm ok with an 80/20 solution that is easy to code.

    But thanks, more UI/UX people should think about the color blindness issue.