Color Palette

Established new standards for color usage in enterprise applications.

Indiana University (UITS)

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.

Screenshot of academic planner applicationScreenshot of application login pageScreenshot of online admissions applicationScreenshot of administrative interface

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.

Screenshot of Schedule Manager

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.

Screenshot of Schedule Manager, with original colorationScreenshot of Schedule Manager colored with new palette
Particular color values were chosen through experimentation, testing the colors in numerous permutations for their aesthetic harmony. Code for the experiment is located on GitHub (iuux/ess-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.

TextBaseInteractiveAccent
050
#f4f1e4
075
#efe9d7
100
#e6e0ea
IU Cream
150
#e1d8b7
150
#d9d1df
250
#c0b89d
400
#919191
400
#9c89ac
IU Majestic
750
#4b306a
IU Crimson
750
#7d110c
900
#1b1b1b

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.

TextBaseInteractiveAccentDangerSuccess
050
#f4f1e4
050
#f2f0f4
075
#efe9d7
100
#e6e0ea
100
#ffdad4
100
#deefd8
IU Cream
150
#e1d8b7
150
#d9d1df
250
#c0b89d
400
#919191
400
#9c89ac
400
#f04e45
400
#006633
600
#5f5f5f
600
#6d5485
IU Majestic
750
#4b306a
IU Crimson
750
#7d110c
900
#1b1b1b
Link
#48009a
Colors added in the second version of the palette are outlined in black.
Screenshot of AdRx Caseload, which uses the newest version of the color palette
Implemented in spring 2015, the feature called Caseload contributed significantly to the refinements in version 2 of the color palette.

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.