I’VE THEMED websites by orchestrating color combinations, proportional palettes, type selection, symbols, etc. And I’ve written various articles on theming for blogs and forums. Color selection is sometimes frustrating. Using machine *helpers* can mislead us to make bad choices.

No one is an expert on color. They just have a method. And what’s appropriate color choices depends upon the audience culture and context. I mess up color experiments a lot. That’s how we learn. But some color knowledge stacks the deck for success in our favor.

Machines, algorithms, and color wheels – the science of color – don’t take into account the affect and effect of combinations of color on humans. Color combinations trigger memories. These then create mood. Theme is about emotion and feelings. This is subconscious stuff. People make visceral judgements in less than 50 milliseconds of whether or not they like the aesthetics of your landing page. REFERENCE

“Decorators and designers sometimes tend to be guided by their own subjective color propensities. This may lead to misunderstandings and disputes, where one subjective judgment collides with another. For the solution of many problems, however, there are objective considerations that outweigh subjective preferences. Thus a meat market may be decorated in light green and blue-green tones, so the various meats will appear fresher and redder. Confectionery shows to advantage in light orange, pink, white, and accents of black, stimulating an appetite for sweets. If a commercial artist were to design a package of coffee bearing yellow and white stripes, or one with blue polka-dots for spaghetti, he would be wrong because these forms and color features are in conflict with the theme.” (The Elements of Color by Johannes Itten. c1961) — Johannes Itten (1888 – 1967)

There are two books I recommend for great theming examples:

1. Pantone’s Guide to Communicating with Color by Leatrice Eiseman.

2. Graphically Speaking: A Visual Lexicon for Achieving Better Designer-Client Communication by Lisa Buchanan.

Don’t worry. They are “picture” books. Buy them used and save some cash.

But there are color tricks our eye plays on us. Things like field effects, color hierarchy, simultaneous contrast, and grayscale differential all alter the perception of color. These alter the pages spirit, personality, or body language. That may sound metaphysical but how can you measure perception and mood.

Memories alter perception. The reader/viewer’s historical memory (emotions) helps them recognize and interpret “theme” (images, symbols, fonts, colors, etc). The theme alters their perception of reality.

LIKE HUMAN BODY LANGUAGE, graphic design expresses similar implied non-verbal business attitudes or values. Graphic design is a method of differentiating businesses or products in the market. Graphic design is considered of equal value to other intangible assets like special customer offerings or an in-house mailing list or goodwill. Design builds a sense of community or habitat for customers and employees. Graphic design really is the body language of business. — Steve Teare

Note: Percent grayscale differential is why placing text over a photograph usually destroys the image and the type readability simultaneously.

The only way to measure color impact is with user satisfaction surveys. And often those are misleading. Why? Because if you ask for an opinion, people will invent one rather than appear stupid. Your results then may be lies or inventions. People don’t always know why they feel what they do or that they even have feeling or care about something that seems so trivial as color. But oddly, people argue more about logos and colors than any other design decision.

The Blueberry Example

Here is information on my reverse thematic process, you use an Internet photo conversion tool to identify dominant RGB/Hex colors and then convert them to Pantone colors.

The Pantone Color System is a collection of about 2,000 colors. They’re referred often as spot colors – or a fifth-color in the 4-color printing process. Pantone standards are obsolete for web work. But the system permits reducing millions of web colors to a manageable reduced color set. An online convertor suggests the closest approximate match.

1. Run the image through an online image-to-palette converter. Preferably one that shows percentage of pixel color coverage. Like: http://www.coolphptools.com/color_extract#demo

2. Convert the RGB or HEX colors to Pantone.

For example: https://codebeautify.org/hex-to-pantone-converter

3. Choose a color theme using the reverse lookup tool. In this case, I chose Serene because of commonality. Normally, with so many “blues,” we’d just say it’s a cool theme and leave it at that. But we can do better even though three colors landed in the “cool” theme using my reverse thematic color lookup table. We can shake it up a bit. Get colors we wouldn’t have found with color pickers.

4. We then look up the two “Serene” colors combinations – indicated in red – and find their textbook companions in Pantone Guide to Color. Mentioned above and shown below.

5. Then we test the color hierarchy with the image. Notice the two new colors in each layout are not inherent in the photo – nor are they simple harmonics or color math. They were chosen by a color expert (not me) and made into a database (by me). They are “psychological” combinations. In other words, based on feelings and memories.

I can now tell Mister Blueberry vendor that for his Brand Manual the official theme is “Serene.” There are many more color combinations that will work to create a serene theme – and still work with blueberries. I have only demonstrated two.

Demonstration 2: The Mountain