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.
Color picker and color wheel – standard design tools on computers.
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:
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.
Color Hierarchy
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
Field effect of touching and non-touching colors cause changes in perception.
Percent grayscale differential (or contrast). We search for edges for pattern recognition especially of text characters.
Grayscale differential failure: Red letters on gray background. Only 18% differential. 30 percent difference minimum is required for the eye to see edges. This affects readability most. The letters have a popping sensation.
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
In our experiment, we have identified 10 hex colors. We’ll now convert those 10 to Pantone numbers.
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.
Ican 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
The image under test for a webpage color theme.
Color
Color Code
Percentage
#90a8c0
0.134093
#181818
0.124388
#a8c0d8
0.093165
#303018
0.089283
#7890c0
0.086920
#484848
0.080759
#606060
0.073333
#787878
0.062025
#909090
0.058734
#606030
0.033418
#6078a8
0.031646
#a8d8f0
0.030295
#d8d8d8
0.026667
#787848
0.024388
#000000
0.020591
https://codebeautify.org/hex-to-pantone-converterReverse thematic color lookup table at: https://sterndesign.co/reverse-thematic-color-lookup-table/
Steve Teare is passionate about helping savvy website owners speed up their websites and save money in the process. His approach combines creative problem solving with technical WordPress know-how. Learn more at Pagepipe.com
Selective activation of plugins is a favorite strategy for speeding up WordPress websites. Now you can use plugin skills to speed up WooCommerce e-commerce sites
It has never been easier to build your own website, but that doesn’t mean you should. Here’s my take on the decision, having been on both sides of the equation.