Color Palette

Before 2015, there were rarely any designers permanently staffed on development teams at Indiana University, so teams managed design issues, such as color, as best as possible. Without cross-team collaboration or governing design standards, the use and choice of colors diversified for every new system over the last 20 years. A new color palette would be determined to start aligning the aesthetic experience across these vast applications. It would be the initial project for the first style guide targeting Indiana University’s student-oriented web applications.

Audit

To discover the severity of current color usage, a sampling of screenshots and style sheets were curated from over a dozen applications, then subjectively assessed. Colors were overused, were used inconsistently, and clashed, both within a single application and among applications.

Given its diversity of both color and user interface components, the Schedule Manager application was chosen for further analysis and eventual experimentation with a new palette.

Schedule Manager is composed of 34 colors. Twelve colors are variations of black and white:

Five colors are sourced from the Indiana University brand guidelines:

Six colors are from Bootstrap:

Eleven colors are from unknown origins:

Within the context of this exemplar, as more color is added, the louder and more meaningless the visual language becomes. This chaos encourages only inaction. It is confounding, paralyzing, and unsure, and those traits are inevitably imparted on the user.

Goals

Ensuing from the audit, three goals guided the process of determining a new color palette:

1. Align with branding: Align the color scheme as strongly with the university brand colors as possible.
2. Limit breadth: Identify a few primary colors to be the foundation of the entire palette, each with its own unique meaning.
3. Control depth: Introduce a very controlled set of shades and tints based on the primary colors, and standardize their naming schema.

Palette

In order to quickly experiment with alternative colors to determine a new palette, a static HTML snapshot of the Schedule Manager application was grabbed and all colors in its style sheets were abstracted into Less variables. As much as possible, markup remained unaltered from the original source and only CSS color properties were adjusted. A custom build system, managed by the 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 palette branch.

Show original use of color

The experiment resulted in a new color palette based on five primary colors:

1. White is the background color, a pure and clean backdrop capable of hosting any user interface.
2. Black and its shades are used for static, non-interactive text (Text).
3. IU Cream and its variants frame the interface, coloring structural items such as borders and headers (Base).
4. IU Majestic (violet) and its variants indicate interactive components, such as form fields and buttons (Interactive).
5. IU Crimson is used as a rare accent (Accent).

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 Accent-750.

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.

Palette, version 2

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.

Conclusion

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.