gulp task runner, allowed the snapshot to instantly update when the variable values changed. Once the untampered snapshot (located in the repository’s
master branch) was ready, all new application of color existed in the
The experiment resulted in a new color palette based on five primary colors:
Variants to these primary colors were generated according to techniques described in the Codying Colors article. The technique allows a full range of tints and shades to be interpolated from a single color. These colors are codified on a scale of
0 (representing pure white) to
1000 (representing pure black) in steps of
50 units. Each source color is placed roughly along its appropriate place in the scale. For example, IU Cream is coded as
Base-150, while IU Majestic is coded as
Interactive-750 and IU Crimson as
|IU Majestic||IU Crimson|
An ancillary benefit of codifying colors is their ability to approximate text contrast ratios. As long as the background and foreground colors are at least a code value of
450 different, then most likely acceptable AA text contrast (
4.5:1) is achieved. However, these approximations should always be confirmed.
After several months of applying the color palette to a variety of applications, none of the original colors have been removed or altered. Instead, a darker gray was added to the Text family, and a new shade and tint were added to the Interactive family. Danger (red) and Success (green) color families, not sourced from the IU brand guidelines, were added to accommodate alert messages.
The only deviant to the norm was the Link color. Any variant along the IU Majestic scale resulted in links appearing dull. In order for links to pop, without the aid of additional visual affordances like underlines, the color needed to be brighter. More specifically, it was generated by increasing the saturation of IU Majestic to
100%. Mostly, colors in the Interactive family are used for borders and backgrounds, not for text.
|IU Majestic||IU Crimson|
The exercise to design a new color palette for Indiana University student enterprise applications resulted in a controlled visual language that will allow users familiar with one interface to quickly understand unfamiliar interfaces. Systematic methods for generating and codifying colors will allow the palette to become richer with new colors as needed, enable consistent naming schemes, and provide utility to those applying the colors.
As the palette is challenged against more user interfaces, it’ll become increasingly important to conduct user studies to determine how effective the color families are on describing interfaces and discover if there are any unforseen accessibility issues. Color families outside of the IU brand guidelines, such as Danger and Success, should be occasionally refined to better fit within the rest of the palette. The Link family may soon need additional colors to represent visited or active states.