Friday, May 13, 2011

Color: Getting Started

Overview

For me, one of the hardest aspects of designing a user interface is choosing an effective color palette. As I don't have a fantastic sense of color, I typically apply quantitative methods to generate a color palette instead of trusting my eye to choose "good" combinations. In my experience, employing a graphic designer to help with color choices is the best approach, but not everyone has that luxury.

When I started attacking color, I was hampered by my past coding experiences that always forced me to deal with colors as a mix of red, green, and blue. I could generate reasonable themes by altering component contribution proportions, but I always felt that the resulting values were a bit "off" unless I stuck with well-known techniques developed during the early days of the web. (#CCFF66 anyone?)

As my user interface concerns moved from single applications to firm-wide suites, my tried-and-true color generation schemes started to fail me. It wasn't until I started to dive into color science that I understood that other color models would serve me better than good old RGB. It was also during this research that I developed a better sense of how to mathematically construct a theme once a model had been chosen. It turns out that these themes look good, too. Bonus!

The purpose of this post is to collect and organize the links that I found to be the most useful in understanding color. I will provide more analysis in subsequent posts and will eventually release a library for advanced color management in WPF, where support for non-RGB models is frustratingly light.

Primers
  • Wikipedia is the best reference for an overview of color models. The related articles for RGB and HSL/HSV models provide the formulae for cross-model conversion.
  • The SAP Design Guild has a mostly-complete color glossary.
  • The folks over at Color Wheel Pro have a very good write-up on color schemes, with many helpful points of advice.
  • ArtSparx has a combination glossary/color scheme overview also well worth the read.
Color Tools
  • My favorite color tool is Petr Stanicek's Color Scheme Designer. Be warned that this tool uses traditional red-yellow-blue primary colors as opposed to red-green-blue, putting green at 180º on the color wheel instead of cyan. Regardless, its ease of use far exceeds anything else I've come across.
  • Color Wheel Pro is also a very good application, though you need to install it to run it.
  • Kaxaml is my favorite visual prototyping tool. I use its color picker for easy adjustment of chroma and brightness.
  • Daniel Flück's "Color Name & Hue" tool over on Colblindor is helpful to assign names to colors that don't align exactly with established nomenclatures. His work is derived from Chirag Mehta's "Name that Color" mini-app.
Conversions and Code
  • TTRider has a good post on codeproject that includes sample code for HSB support for .NET's System.Drawing.Color. It wouldn't be hard to apply these pricinples to its cousin in System.Windows.Media.
  • Bob Powell  has also done significant work in this space, providing both C# and VB samples for HSB conversion and manipulation.
  • Blackwasp also covers RGB vs. HSV thoroughly, providing a lot of commentary for their conversion code. 

[Ratatat: Drugs -- YouTube]

No comments:

Post a Comment