Palette development is my favorite activity!
There’re many ways to develop a palette. The palette I used in the prototype is a quick steal from Color Brewer, which turned out to be quite interesting and I decided to keep it.
For this particular design, I’m going to compose the palette from the photos I used as the background of the original designs. Again, there’re many ready-to-use applications out there to generate quick swatches from a photo. But here I prefer a slower and more manual work, to ensure I get all the colors right.
The photo is taken with a micro lens attached to my iPhone. I love how all the teeny tiny spring flowers turned out under the lens. I probably applied some Instagram filters to quickly tune the overall tones. And now the colors are ready to be harvested.
This is the easiest step. I went through all four background photos, and used the Photoshop eye dropper to pick out all the interesting colors, save it to a Library called “Experiment”. Library is newly added feature for Creative Cloud, that allow sharing assets across application and with collaborators much easier.
Cherry Picking and Grading
Then I opened up Illustrator to transfer all the colors from the CC Library into the Illustrator Swatch and put them all in a folder. I do find it cumbersome to not have auto transfer between CC Library and app-native swatch (I did it manually). I’m just putting my feature request here, Adobe CC.
When I work with swatches, I do prefer Illustrator over Photoshop, for it’s easier to regroup and drag things around. I probably could have harvested the color in Illustrator directly, to skip the manual transfer step. Well. I just automatically reach to Photoshop when I’m dealing with bitmaps.
Here I created a bunch of squares to soak the color:
Because in my prototype I have decided to use a dark background (#222), I would assess my color choice against the same background:
I put the colors into 4 rows, each to present a color composition that inspired by one of the 4 photos, and got rid of colors that are too indistinguishable from another. Or adjust some of the brightness or saturation to fit with the backdrop.
In the prototype, I found the beaming progression of the colors very interesting, and want to keep that. So when deciding for the ordering of the swatches, I aligned them back to back to see if the progression works. The color beaming animation is playing with those color in my head...
I never progressed to write the Part II (very irresponsible blogger) because the deeper I dig in this topic, the more I'm convinced it's better to leave the color sorting decision to human. At least for now.
After all, colors are subjective in the eyes of the the beholder. How we perceive color, either emotionally or biologically, is a product of million years of human evolution. The computer can sort the colors by the HEX value, by its hue, by its brightness or saturation, or any parameter that's quantified to simulate a color on an video screen. But that doesn't necessarily produce aesthetics or corresponding to our cognition.
Engineering the colors?
How scientific or mathematical can you go with colors? Here's an example:
|Saturation: 50%||Saturation: 50%|
With the same value in saturation and lightness, the yellow hue is perceived much brighter than the blue hue. But as you decrease the saturation by the same amount, the yellow seems to get darker, but the blue seems to get brighter.
Some computer scientists propose to look at colors by luma and chroma, which might simulate our human perception of contrast. That’s getting a little too much. Lea Verou has a fantastic slide deck if you’re interested to dig deeper.
Whenever the topic of palette development arises, I often need to tune down my computational thinking. Closing all the Wikipedia pages I opened, I'd trip to Sephora and Macy's to look at the lipsticks and eye shadow palettes. Some of the combinations are very audacious and inspiring.
Ta-da! Magic happened!
Adobe CC to Sublime Text
The rest is really just the typing work. I wish Adobe CC would one day export the colors as an array of strings. Or if there is an automated workflow, please please comment below and I’m sure it’ll save a lot of people! ^_^