Do you trust a color picker?

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:

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.

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.

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

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-converter

Reverse thematic color lookup table at: http://sterndesign.co/reverse-thematic-color-lookup-table/

RESULTS

HEX = Pantone = theme names

#90a8c0 = 535 = capricious, muted, serene, spiritual

#181818, #000000 = black = powerful, classic, elegant, sensual

#a8c0d8 = 651 = muted

#303018 = 5605 = traditional

#7890c0 = 652 = muted, unique

#484848 = 446 = classic

#606060 = 425 = powerful

#787878 = Cool Gray 9 = classic, naturals, spiritual

#909090 = 423 = traditional

#606030 = 5753 = earthy

#6078a8 = 5415 = muted, traditional, unique

#a8d8f0 = 277 = Serene, Spiritual

#d8d8d8 = 664 = serene, romantic

#787848 = earthy, unique


Business Elimination: romantic, spiritual, unique

muted = 4

traditional = 3

classic = 3

serene = 3

classic = 3


Muted colors Pantone book

617 dom, 5145 sub, 535 accent

651 dominant, warm gray 8 sub, 5517 accent

warm gray 4 dom, 5155 sub, 652 accent

5415 dominant, 5487 sub, 617 acc


converted to hex from reverse color lookup

#CCC47C dom, #AD8799 sub, #9BA3B7 accent

#9BAABF dominant, #8c8279 sub, #C9CEC4 accent

#b6ada5 dom, #CCAFB7 sub, #6D87A8 accent

#607C8C dominant, #667C72 sub, #CCC47C acc


My Choice of Colors:
#CCC47C

#AD8799

#9BA3B7


Alternative colors

#9BAABF

#8c8279

#C9CEC4


#b6ada5

#CCAFB7

#6D87A8


#607C8C

#667C72

#CCC47C


SAMPLE TEST

Complementary dark-purple color for buttons and CTA below:

#533c74

http://paletton.com/#uid=21C0u0kczpB4fFj8auoh0lrljh-

About The Author

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

You Might Also Enjoy

Why and How This Site was Built

Take a peak behind the curtain and learn the why and how this site was built. I’ll share some of the thoughts behind my decisions and a bit about the technical details of the site.

Read More »