How to create a color story
Apply cinematic color theory to your app, product, or startup.
A global fellowship of artists
Printed on the back of my membership card to the society of cinematographers I received after my first big gig shooting on an honest-to-God motion picture was a grand promise: that if I ever got in trouble while traveling over seas, all I needed to do was flash my cinematographer’s card, and artists and institutions everywhere would come to my rescue.
I can’t imagine this actually working; something must have been lost in the translation. Would a Parisian museum really bail me out if I got into a bar fight or was shooting without a permit?
But the notion of a tender but rugged fellowship of artists who bend light and tug emotions has stuck with me. And I loved that it was a global fellowship.
The central take-away from my time working in the movies (I did CG camera work for the Shrek, Madagascar and Matrix trilogies) was this: every artistic decision is done for a reason. And those reasons add up to a system.
Lens choices, camera angles, color palettes, editing rhythm, and more are all elements in a specific vocabulary created to best express the story.
Here’s the insight for color: instead of trying to map colors back to cultural associations (which are not fixed across all cultures, but change with every micro-culture), it’s better to assign meaning to each color and stick with it.
This trick works perfectly as long as you never break your own rules, unless, of course, the shock itself creates a greater truth.
Here’s a few examples:
In The Matrix (1999), color tells us immediately if we are inside The Matrix (green and orange) or out in the real world (blue and purple). The same idea was used in The Wizard of Oz — where Kansas is shot in black and white and the Oz is in color.
In Network (1976), the filmmakers set up an internal rule where evil is depicted by television’s blue-white glare and good by low-key blacks and browns.
In The Terminator (1984), the post-apocalyptic future is blue, the robotic evil of the Terminator is red, and hope for humanity is warm/neutral peach, pink and orange.
Here are two examples from from Shrek (2001). The one on the right was painted by Guillaume Aretos to set the look and feel for the Dragon’s Keep. Notice how the warm and cool tones are pushed to extremes. In the first Shrek, red was used to signal danger/evil (it is both color of the lava here, and Lord Farquaad’s costume), mainly because it is the opposite on the color wheel from our hero — who’s skin is a lovely shade of Kermit/Yoda green.
Color check
A way to analyze color in film is to make a color fingerprint.
See this site for details.
Can you guess which movie is depicted by each fingerprint? Here’s a hint: Fantastic Mr. Fox and the Royal Tenenbaums have almost the same palette.
Color story for apps and startups
How to create a color story for your app, product or startup.
The first color story I made for a product was during the initial GoogleTV launch. The creative brief called for us to use all the Google colors — so I asked for the color story behind what each color meant. In the terms of semiotics and branding 101 — what did it signify?
What did each color mean?
It quickly became clear that Google hadn’t ever thought about what the colors might mean. Or if they had, they hadn’t told this particular PM. So we set about writing the rules. And they were very simple:
Blue = interconnected devices (web or mobile)
Green = a good decision for the planet
Red = something fast, real-time
Yellow = problem/friction
That story was used for the initial launch and then abandoned later, but the concept was sound — construct rules for your colors and stick to them, so people know if they are inside or outside of the Matrix.
Color Story as Strategy
At Twitter, I was given a well-meaning assignment to write emotional descriptions of the colors we were using for the brand. We had Twitter Blue, of course, and a bunch of greys, but what about all those tertiary colors? The greens, reds and purples?
I thought we could do better than just talking about the feel of colors, and could instead assign functional meaning.
I live by the rule of “Don’t say yes to bad ideas,” so instead of writing emotional descriptions, I wrote what we actually needed — functional descriptions.
Language as data
I started by listening closely to the adjectives commonly used by Twitter’s top brass in public speeches (I knew this material well, because I served as an occasional speech writer for the C-suite), broke them down into initiatives that stretched across the product, business and company, and then assigned key colors to each main initiative.
For instance, one color denoted Twitter’s “real-time” attributes/features and experiences, and another color highlighted how Twitter was “widely-distributed” through off-network channels like blogs, TV, radio and every form of press.
At first I offered this up as guidelines for our corp design team to make better choices on when to use each of the accent colors. Which they did, rather marvelously.
But then something astonishing
and much more valuable started to happen.
Once I’d written up a color story mapped to value (instead of emotions or cultural connotations), I could judge a project from across the room on whether or not it was a strategic fit for the company, just by highlighting each of the words in the corresponding colors and squinting.
Here’s how: I’d write a 50-word project description for each idea and color-code every word that connected back to adjectives or concepts commonly used by our executives in public speeches to describe the company’s value.
If you saw lots of color, the project was worth a deeper look.
If you didn’t see any color, then it was worth double-checking why we were doing this project if it wouldn’t advance what makes the company valuable.
As a result, every project I launched brought Twitter many more users and much more money — not because I made things pretty, but because I used my color and language analysis to check myself before starting. In a sense I was cheating — in that I already knew my projects would win, because they mapped directly to the value of the company.
Use language as data and color for analysis,
to ship with courage earned from insight.
Big Idea Comms
Now at Sequoia, we recently concocted a mini-color story at the Sequoia Creative Lab for “Big Idea” comms. Here’s a glimpse.
The same concept from Google and Twitter is put to use for simple content categories. Straight forward, easy to understand and put to use.
Your turn
- Pick your main brand color (examples: blue for Twitter, purple for Yahoo!, red for Netflix, etc.). It doesn’t have to be blue. The sky is blue for a reason (shorter waves of light are scattered more easily); your app doesn’t have to be.
- Pick your first complement. An easy choice is the opposite secondary from your main color, so if your main color is purple, your first complement is yellow. If you don’t know your color pairs, it’s the opposite color on a color wheel.
- Pick three additional colors, but these aren’t as important as the first two.
Go through the strategic exercise of mapping out what aspects you need to tell about your product, company or endeavor. If you aren’t sure how to start, try this exercise or just listen to what adjectives pop-out every time you or your team (or your customers) describe the value of your enterprise.
Map each foundational element of your strategy to your colors, starting with your main color as your brand/product/company and your most important feature (or the way you make money) as your first complement. Continue until you’ve assigned all your colors.
Once you’ve got it mapped, then stick to it. You don’t want to confuse someone about whether or not they are still in the Matrix.
❤
Hey designer, looking for something new?
Join me at Sequoia as a Visiting Designer
