Ways that color communicates meaning

Back in 2009, Rob Mills wrote an interesting article for Think Vitamin on How Color Communicates Meaning, where he focused on seven points:

• Color affects your mood
• Colors communicate invisibly
• Color has cultural significance
• Color can be inspired by our surroundings
• Color has political associations
• Religion can be linked to colors
• Age effects color preferences

For details on each of these, read Rob’s entire article: http://thinkvitamin.com/design/how-colour-communicates-meaning/

See also these blog posts of mine related to color:

• Tips for using color: https://cybertext.wordpress.com/2008/02/11/tips-for-using-color/
• What different colors mean in different countries: https://cybertext.wordpress.com/2009/05/18/what-different-colors-mean-in-different-countries/
• Illustrated guide to color contrast: https://cybertext.wordpress.com/2009/09/02/the-illustrated-guide-to-color-contrast/
• View your website as a color-blind person: https://cybertext.wordpress.com/2008/06/19/view-your-website-as-a-color-blind-person/
• Personality test using colors: https://cybertext.wordpress.com/2010/02/25/personality-test-using-colors/
• When green means stop and red means go: https://cybertext.wordpress.com/2010/09/21/when-green-means-stop-and-red-mean-go/

Related:

• How do colors affect purchases? http://blog.kissmetrics.com/color-psychology/

[Links last checked June 2011]

But which blue?

Did you know that you can trademark a color???? Strange, but true…

ANZ (www.anz.com.au), one of Australia’s ‘Big 4’ banks, has had a trademark statement about its blue color for some time and it’s always bothered me. Why? Because I can’t see how you can trademark a color that’s in the public domain (i.e. one you haven’t had created especially for you/your company), and I can’t figure out exactly WHICH blue ANZ has trademarked! Their website contains many solid blues and blue gradients, and the trademark statement at the bottom of their web pages doesn’t tell us which blue they’re referring to.

Here’s a sample from the bottom of the home page (screen capture taken 30 March 2010), where there are at least four blues displayed (I’ve added callouts for the hex values of each); add in the variations in the gradients, the link text, the anti-aliasing around the text on the graphics etc. and there are plenty more blues to choose from — so which one have they trademarked?:

Which blue does ANZ 'own'??

I can understand how and why a company can trademark a logo, and a set of elements that make up a logo (color, font/typeface, shape etc.), but a color all by itself? That’s just weird.

See also:

• Whirlpool Forum discussion on this: http://forums.whirlpool.net.au/forum-replies-archive.cfm/684014.html
• BBC News article (2004): http://news.bbc.co.uk/2/hi/uk_news/magazine/3555398.stm
• http://www.colormatters.com/color_trademark.html

[Links last checked March 2010]

Personality test using colors

Most of us have done some sort of personality test at some time. Perhaps you were asked to do a formal test (like Myers-Briggs) for a career assessment, or maybe you’ve just done some fun tests on the internet.

Well, here’s something a little different — a free personality test using colors, available online here:  http://www.careerpath.com/career-tests/colorcareercounselor.aspx

You choose the colors you like the most and the least and at the end you’re given an assessment of your two strongest characteristics based on your color choices, along with suggested careers for each personality type.

BTW, my strongest characteristics on my first attempt were Organizer and Researcher — no surprises there! I did the test again a few days later and this time my results were Creator and Social Manager. Obviously I must’ve chosen different colors the second time round. Interestingly, the two careers I’ve had in my working life — librarian and technical writer — are both listed in the Creator classification, and ‘proofreader’ is listed under the Organizer occupational category (I do a lot of editing, too).

[Link last checked February 2010]

Working with RGBA colors in CSS3

Drew McLellan’s article — Working with RGBA colour — on the 24 Ways website, describes how to use the opacity settings available in CSS3 to set transparency on various colored elements.

It seems you can only use these with RGB colors, not Hex values, so you’ll need to convert your hex values to RGB values if you want to take advantage of this attribute. Most graphics software will display both, so you shouldn’t need to get any other software. However, if you don’t want to open up your graphics software every time you need to grab the RGB values, there are some simple ‘on top’ tools that let you do this, such as ColorPix, which I mentioned on this blog back in March 2009.

That link to the article again: http://24ways.org/2009/working-with-rgba-colour

[Links last checked January 2010]

What different colors mean in different countries

Color — and how its interpretation varies from culture to culture — is one of the elements I discuss in my presentation on reviewing user interfaces.

Xerox have an International  Color Guide page on their website that lists several countries. Clicking on each country’s name shows how that country views certain colors. For example, white in Colombia is a favorable color, whereas in New Zealand it can mean surrender; in India white means chastity and purity; in China — mourning; and in the US, white means purity, holiness, and innocence, among others.

While the list of countries is not extensive, this section of the Xerox website at least highlights how the symbolism of color varies across the world. So if you are developing applications or designing products for people in other parts of the world, be aware that the colors you use may have specific meanings that are quite different from the meanings you’re familiar with.

See also:

• Color meanings: http://www.color-wheel-pro.com/color-meaning.html (I suspect these are only western meanings)
• Colors in various cultures: http://www.informationisbeautiful.net/visualizations/colours-in-cultures/

[Link last checked January 2010]

Color scheme tools

My good friend Char ‘tweeted’ about this site the other week: http://www.downloadsquad.com/2008/10/09/color-me-crazy-10-best-online-color-tools/.

It lists the author’s 10 favorite color tool websites, which are great for designers of all types (web designers, graphic designers, interior designers, fabric and craft designers, etc.).

I knew of some of them already, as well as some of those listed in the comments. But several were new to me.

Here are some other color tool websites that I’ve used and recommend:

• http://colorschemedesigner.com/
• http://www.snook.ca/technical/colour_contrast/colour.html (dynamically see how text and background colors look together)
• http://www.degraeve.com/color-palette/ (enter a URL and get this site to display swatches of the colors used on the page)
• http://colorblender.com/ (move the sliders to get matching colors and palettes)
• http://www.easyrgb.com/index.php?X=CALC (convert from one color data standard to another)
• http://www.joedolson.com/color-contrast-compare.php (compare two hexadecimal colors to check whether the contrast between them satisfies the Web Content Accessibility Guidelines [WCAG], versions 1 and 2)

[Links last checked and updated July 2011]

ColorPix: Find a color value

I recently wrote about how to find a color value using PaintShop Pro. Then I remembered that I had a really simple (and free) little utility program that also gave me color values — including CMYK — just by hovering over an area of color (1 pixel is enough!).

The utility is called ColorPix and you can get it from many download sites, or direct from the ColorSchemer people at http://www.colorschemer.com/colorpix_info.php. You don’t have to install anything — just run it and it works.

ColorPix displaying the values for a blue in the Search icon

PaintShop Pro: Find a color value

You find this great image and want to find out what colors have been used in it. There are several ways you can go about this — in this post I’ll describe one way to do it in PaintShop Pro X. Other graphics programs will have similar tools to the Eyedropper Tool in PaintShop Pro.

1. Open the image in PaintShop Pro X.
2. Zoom in to make it bigger, if applicable — this helps you see the individual colors better.
3. Click the Eyedropper Tool in the toolbar then move the eyedropper tool over the image.
4. As you move the eyedropper, a little box displays the RGB color values of the pixel at the tip of the eyedropper.
   

   The eyedropper tool shows the RGB value of a pixel

5. If you click on a pixel, that color is put into the Materials swatch.
   

   Color swatch

6. Click on the swatch and you get more detail about the color —  the RGB values (1 on the image below), the HSL values (2), and the Hex value (HTML field) (3).

Material Properties window showing color values

Unfortunately, PaintShop Pro doesn’t display Pantone or CMYK colors, but at least you should have something to work on with the values it does have.

View your website as a color-blind person

View your website as a color-blind person views it at: http://www.vischeck.com.

If you work with PhotoShop, you can also download a free plug-in that allows you to view your graphics as though you had a form of color blindness.

Update 8 July 2008: Richard Rutter shares some of his experiences as his opinions as a color blind web user.

[This article was first published in the December 2006 CyberText Newsletter; link last checked January 2008]

Color code your Windows folders

Ever wished you distinguish between those masses of yellow folder icons in Windows Explorer?

If you often move files from one directory or machine to another, it’s easy to get confused as to which is the original folder and which is the destination. Wouldn’t it be great if you could change the color of the original to red (‘don’t touch these’) and the destination to green (‘copy here’)?

Well, now you can with some cheap software from:

• http://icolorfolder.sourceforge.net (free)
• http://www.foldermarker.com (free, Home [US$20] and Pro [US$30] versions).

You’re not limited to red and green, either! How about pink, purple, orange, black, or white?

[This article was first published in the December 2007 CyberText Newsletter; link last checked January 2008]