Case Study
Abstracting Colors for Hewlett-Packard Company
At one time, each division within Hewlett-Packard Company exercised complete autonomy in the design of its site. I oversaw the Internet Security products, and here is my website header from 1998:
A work of art, I know, but unlike any other part of the HP website.
In 2001, HP performed a massive consolidation and redesign of its web sites.
The Color Choices
The design team produced a color palette with strictly defined color choices. First the primary colors were chosen:In addition to defining the colors, the design team determined which colors could go together. Each page could use two of the primary color sets.
Warm Colors
Cool Colors
Contrasting Colors
Abstracting the Colors
Since this was before the time when CSS was widely supported, I knew these color codes would be scattered throughout my website, so I decided to convert my site to PHP and abstract as much of the new design as possible. This required a lot of hard work, but proved to be the right decision, because subsequent redesigns were easier to implement.
My first step was to create a data structure for all of the color choices:
$hpColor = array( 'grey01' => array( 'a' => 'e6e6e6', 'b' => 'cccccc', 'c' => '666666'), 'blue01' => array( 'a' => '66ccff', 'b' => '3399cc', 'c' => '006699'), 'blue02' => array( 'a' => '99ccff', 'b' => '6699cc', 'c' => '336699'), 'green01' => array( 'a' => '99cccc', 'b' => '669999', 'c' => '336666'), 'green02' => array( 'a' => 'cccc99', 'b' => '999966', 'c' => '666633'), 'brown01' => array( 'a' => 'ffcc99', 'b' => 'cc9966', 'c' => '996633'), 'brown02' => array( 'a' => 'ffcc66', 'b' => 'cc9933', 'c' => '996600'), 'orange01' => array( 'a' => 'ffcc66', 'b' => 'ff9900', 'c' => 'ff6600'), 'orange02' => array( 'a' => 'ff9966', 'b' => 'cc6633', 'c' => '993300'), 'red01' => array( 'a' => 'ff9999', 'b' => 'cc6633', 'c' => 'cc3333'), 'red02' => array( 'a' => 'ffcccc', 'b' => 'cc9999', 'c' => '996666'), );
Next I defined the acceptable color combinations. Although I didn't use these data structures, they were a useful reference.
$hpColorWarm = array(
array('brown01', 'brown02'),
array('brown01', 'red01'),
array('brown02', 'red02'),
array('brown01', 'orange01'),
array('brown02', 'orange02'),
array('orange01', 'orange02'),
array('brown01', 'orange02'),
array('brown02', 'red01'),
array('orange01', 'red01'),
array('orange02', 'red01'),
array('orange02', 'red02'),
array('orange01', 'red02'),
);
$hpColorCool = array(
array('blue01', 'green01'),
array('blue02', 'green01'),
array('green01', 'green02'),
array('blue01', 'green02'),
array('blue02', 'green02'),
);
$hpColorContrasting = array(
array('blue01', 'brown01'),
array('blue02', 'brown01'),
array('green01', 'brown01'),
array('blue01', 'brown02'),
array('blue02', 'brown02'),
array('green01', 'brown02'),
array('blue01', 'orange01'),
array('blue02', 'orange01'),
array('green01', 'orange01'),
array('blue01', 'orange02'),
array('blue02', 'orange02'),
array('green01', 'orange02'),
array('blue01', 'red01'),
array('blue02', 'red01'),
array('green01', 'red01'),
array('blue01', 'red02'),
array('blue02', 'red02'),
array('green01', 'red02'),
array('green02', 'brown01'),
array('green02', 'brown02'),
array('green02', 'orange01'),
array('green02', 'red01'),
array('green02', 'red02'),
array('green02', 'orange02'),
);
Finally, I picked the colors that I would use for my website. To add a little variety, I picked one primary color (blue) and two highlight colors that could be switched on different pages.
$color = array( 1 => $hpColor['blue02'], 2 => $hpColor['brown02'], 3 => $hpColor['brown01'], );To access the colors, I used a PHP variable like this:
$color[1]['a']
Final Analysis
Abstracting the colors allowed me to:
- Separate the color choices from the content of the pages.
- Easily change the color design of the entire website. In the days before CSS was widely supported, this was especially useful.
