Designing with Meaningful Color
An introduction to Open Color Tools, a set of powerful design tools to explore, define and manage meaningful color systems.
In the late 1950s, Pepsi lost its market leadership in South East Asia to Coca Cola because it changed the color of its vending machines from “regal blue” to “ice blue”.
When UPS came to Germany in 1976, it faced resistance by the locals. The brown uniforms had to be replaced by green ones.
Passengers where puzzled when United Airlines personell greeted them with white carnations on their first flights out of Hong Kong. The Airline quickly switched to red flowers.
In some parts of Asia, lighter shades of blue are associated with mourning. Brown uniforms reminded Germans of the SA, the paramilitary wing of the Nazi Party, also called “Braunhemden” (Brownshirts). And many passengers on the UA flights thought of death when they looked at the white blossoms.
Colors have meanings
Beside having connotations and evoking emotions, colors also perform functions. The same red can be used as a recognizable brand color that makes it stand out from the rest, or as an eye catcher in an interface that tries to get your attention. Color coding is also often used to guide people by associating colors with a category on a website or a part of a building.
What’s in a name?
“Blue” and “Grey” are just names to describe a certain range of the color spectrum. How these colors are perceived, however, varies greatly. If you ever painted a room with colored paint, you have probably experienced it. The walls looks very different depending on the light situation. In the shadow, a pale grey looks much darker, whereas in bright sunlight it appears white. Unless your eye has some brighter color to contrast it with — then the grey looks grey again.
You might have also had heated discussions with someone who describes an item as yellow, when it (obviously!!!) is green.
For color-blind persons color names get even more meaningless. “Red” is just an empty label.
Colors make your design
Colors affect the impact of your design immensely. That’s why good designers make very conscious decisions about the colors they use. They don’t just pick color combinations that look beautiful, but create color systems that also consider psychological, cultural, functional and contextual aspects.
To document these color systems, designers already have several handy tools today. Zeplin, Avocode or Craft Library provide great ways to extract colors from existing designs, list them as color swatches in a living styleguide manner. On this basis, colors can be named so the people implementing the design get a better idea of the color’s purpose and create reasonable color structures in their stylesheets (in CSS, BootStrap etc.).
This, however, all happens after the design is finished. But with an increasing fluidity and complexity in design, there is no such thing as “finished”. Ideally, colors are already meaningfully named during the whole design process. What gets handed over to a fellow designer or developer is a snapshot of the current state of a color system. And when it changes, it does so without involving any tedious, error-prone manual effort.
Colors as material
Color is a material designers work with. Like in every craft, knowing your material well is essential. Today’s tools, however, don’t reflect the significance of color as material.
The most basic color material inventory is a plain list of all used colors. Sketch extracts these colors as “Document Colors”. It also shows “Frequent Colors Used in…”, providing a list of frequently used colors and how they are used within your document:
There’s no way to name or structure your colors in Sketch, though. That’s why we decided to build Open Color Tools, featuring a Sketch extension and a custom Mac OS X Color Picker to enable just that. The Open Color Companion App allows you to create color palettes in a flexible and readable descriptive format. Then the Color Picker displays them with their names and groups and lets you pick colors.
Additionally, the Sketch extension offers commands to tell you which color the properties of a selected Layer have:
Your color material changes dramatically as soon as you enrich it with your own nomenclature. Adding visual names to color swatches gives them intent and context.
So for example, you might have some brand colors, some Blues and some Greys involved in your design. Naming and grouping them by their visual characteristic helps you to keep track of your colors, and how you use them:
The Open Color Companion App also allows you to transform your palettes or export them to all different kinds of formats:
Meaningful colors in use
But there’s even more. The Open Color Tools Sketch extension allows you to attach meaningful names to Layers: instead of defining a property to be “Off-White”, you rather describe it with a semantic name like “HeaderBackgroundColor”, or just “HeaderBackground”. This meaningful denotation serves as a proxy and can basically be linked (and re-linked) with any color value.
Imagine an App that has different color themes: a light “Day Theme” and a dark “Night Theme”. You define usage names such as “HeaderBackground” or “Headline” and attach them to the respective elements in the UI. Depending on the theme in use, they can be different color values:
This way, the semantic color meaning is uncoupled from the color value and can easily be replaced — just like color themes should work. Changing from “Day Theme” to “Night Theme” — a task that would take minutes or hours to complete — becomes a matter of seconds:
You can also use theme switching to quickly explore different color hues for your design:
Open Color Tools for everyone
If this sounds interesting to you, please join our journey to make working with color better, more open and more meaningful. Have a look at Open Color Tools, a set of powerful design tools to explore, define and manage meaningful color systems. We’re looking forward to your contributions, comments and questions.
You can also download the Sketch Document with the Reader App UI shown above and the respective Color Palette in Open Color Tool’s .oco format here:
A Reader Themes Demo.sketch
A Reader Color Palette.oco
Please note that this demo only works if you have Open Color Tools installed on your computer. Download a trial or buy the software here.
If you have any questions or comments: we’re looking forward to hearing from you!
We are precious design studio from Hamburg, Germany. We help innovators to shape meaningful products and services that people love to interact with. We help designers design better by creating design tools they love.
Open Color Tools is a close collaboration with our friends at Flowbyte.
