07 QUICK THEMING: A checklist for fast theme generation.

Building a Color Theme from an Image.
1. Find a nice image pertaining to the site content. Here I selected an image of terraced rice paddies. I copy it and size it down by half to speed the online color translation. I save the original for the site.

2. Upload the image via browser to http://www.pictaculous.com/, a color palette generator and it quickly produces this selection of five experimental colors.3. The yellowish color hexcode #FFD064 is of interest to me. But any of these colors might work. In Photoshop’s color picker, the hex color number translates to approximately The Big P Corp ~1355. A little pinkish, but the colors don’t always match exactly, in fact, if they’re close that is good enough.
4. I go to http://www.pagepipe.com/www3/ and use the EDIT > FIND function to locate ~1355 [#FFD064]. It is a FESTIVE color accent. I pull THE BOOK off my shelf and go to page 98 and 99. The matching dominant color is ~244 and the subordinant is ~228. While this combination and classification weren’t what I was expecting, I decide to try it out. Back to the chart and copy and paste the hex approximations.
5. These then are the experimental results generated in minutes.

Dom ~244 = #EDA0D3
SUB ~228 = #8C004C
ACC ~1355 = #FFD0646. Now I’ll mock it up in GIMP as a test.
Adding a little calligraphic brush font as an headline or caption would add interest, but I decided just to use color. This combination makes a simple welcoming and even somewhat dramatic theme. And the accent, yellowish color did turn out the right color onscreen. Amazing?!

How to apply this technique to your HTML pages? We’ll be getting to that soon.

Comment please.

06 LOFI THEME SELECTION: Cheating with Color

PGCw/C is a popular color theming book, published in 2000. You can buy it used at Amazon. The book was supervised by a Senior Vice-president of The Big-P Corp, Inc.

Color Themes for Dummies
Pantone Guide to Communicating with ColorI’ve read the guru author’s other written works and they’re centered on the psychology of color almost to the point of being cosmic. This book is like a “Color Themes for Dummies” –not like the rest. Very practical and brass tacks. It’s definitely written to sell the Big-P color system. Almost every color in their palette is used in the book. It appears this was one of the major goals.

What Colors Should be Used Together?
Regardless of motive or simplicity, the book is a great tool for speeding up website production. One of the things most used on a low-fidelity site is color. This is because color on the web has no-charge, no loadtime, and no setup like print. Millions of web colors instead of a limited print palette like CMYK or Big-P. Frequently, for programmers it’s difficult to know what color should be used together. This is almost bulletproof design.

Reverse Thematic Lookup Table Online
Using the book as a key, I and my wife, Terrie, built a reverse thematic lookup table. It’s written in HTML but uses PHP-GZIP compression so it will load fast. This file is about 25,000 lines of code.

The Book is the Key
How to use the color tool is simple –but requires the book as a key. Using a color picker you select a color sample from a photo, a logo, a corporate color, or put an image through an online color filter.

Convert the hexcolor of choice to a Big-P color (Photoshop?.) You’ve now switched from an RGB palette with millions of alternatives to a palette with just 2,000 colors. Much more manageable for decision making.

Use Your Browser As a FIND tool.
The selected Big-P color is used on the Reverse Lookup using the EDIT > FIND browser function. This will indicate the theme category and what page of the book you can find it. The palette has again been reduced. Each theme page has 24 color combinations demonstrated. Color selection keeps getting easier and easier. From that you can select the dominant, subordinate and accent colors. I’ll be demonstrating this later in future entries.

It’s color combinations that create themes.
Themes are based on visual memories and emotion. This is what the designer wants the audience to feel when they view the site. Color is one aspect of theme. We’ll look at typography soon.

Please comment.