Color

Color palette example

Our color palette is characterized by purpose and restraint. This enables our brand to speak clearly through its powerful voice (our words) and compelling images (our photography).

The brand leans chiefly on the primary palette (Fire Engine Red and Navy Pier Blue) and a set of neutrals. Secondary and tertiary colors support and accent these hues.

When applying color to layouts, always use the values listed in this document. These values have been adjusted for optimal reproduction across screen and print and may not exactly match Pantone Color Bridge breakdowns. The values here originate from official Pantone Color Bridge swatchbooks.

Primary colors

Our primary colors are Fire Engine Red and Navy Pier Blue. Layouts lean heavily on these colors. Mix in selections from our neutrals, secondary and tertiary palettes to build color schemes that are complementary and balanced.

Fire Engine Red and Navy Pier Blue

Tips:

Fire Engine Red should never be used for body copy or small text. It can be used for big impact statements, headlines and subheadlines.

Fire Engine Red

Pantone 199 C
CMYK 10, 100, 86, 2
RGB 213, 0, 50
HEX #D50032

Navy Pier Blue

Pantone 2758 C
CMYK 100, 94, 30, 28
RGB 0, 30, 98
HEX #001E62

Neutral colors

These neutral hues pair perfectly with our primaries. Due to the subdued nature of these selections, overpowering the primary color is less of a concern.

Tips:

  • Our three lighter neutrals (White, Expo White, and North Avenue Beach) are indispensable colors. They bring in the brightness and warmth to our otherwise rich palette. Feel free to use them often, pairing with all of our colors.
  • When a dark neutral is needed, lean on Steel Gray for any full bleeds or large impact moments. It brings depth without being too high contrast.
  • Black should be used sparingly, for long form text and call outs. It is not meant for large swatches of color.
Neutral black

CMYK 75, 68, 67, 90
RGB 0, 0, 0
HEX #000000

Neutral steel gray

CMYK 69, 63, 62, 58
RGB 52, 51, 51
HEX #343333

White

CMYK 0, 0, 0, 0
RGB 255, 255, 255
HEX #FFFFFF

Expo white

Pantone 7527 (25%)
CMYK 2, 2, 6, 0
RGB 246, 243, 236
HEX #F6F3EC

North Avenue Beach

Pantone 7404 (17%)
CMYK 1, 1, 13, 0
RGB 254, 248, 224
HEX #FEF8E0

Secondary colors

The secondary colors add a broader range of tonal expression to our communications. Be sure to use them as supporting elements. For new audiences, use them only as accent colors; once the audience is familiar with UIC, these secondary colors can make up a larger percentage of the palette.

Secondary colors: Chicago Brick, Second City Slate

Tips:

These colors can be used as colors for backgrounds, linework and other graphic elements.

Chicago Brick

Pantone 3517
CMYK 20, 100, 100, 14
RGB 177, 0, 0
HEX #B10000

Second City Slate

Pantone 543
CMYK 34, 13, 9, 0
RGB 166, 197, 215
HEX #A6C5D7

Tertiary colors

Our tertiary colors introduce contrast, energy and emphasis. Use them to highlight key moments — such as statistics, calls to action and supporting graphic elements.

Tertiary colors: Chicago River Green, Chicago Blue

Tertiary colors: Chicago River Green, Chicago Blue

Chicago River Green

Pantone 7724
CMYK 84, 17, 73, 3
RGB 0, 150, 108
HEX #00966C

Chicago Blue

Pantone 298
CMYK 65, 3, 0, 0
RGB 65, 182, 230
HEX #41B6E6

Tertiary colors: UI Health Sky, Dark Maroon

UI Health colors vary from the university colors; please visit the UI Health color guidelines to learn more.

Tips:

  • These colors should never overpower the primary palette. Tertiary colors should be used as accents, not foundations. As a percentage, no more than 20% of the layout should be one of these colors.
  • As we get further into a long-form piece — say, halfway through a 30-page viewbook or a few scrolls down in our website — it’s acceptable to use these colors occasionally for larger graphic moments, like full-bleed spreads or backdrops for text.
  • Dark Maroon, however, should be used only for text and linework.

UI Health Sky

Pantone 7704
CMYK 90, 18, 10, 10
RGB 61, 141, 164
HEX #3D8DA4

Dark Maroon

Pantone 490
CMYK 45, 87, 78, 69
RGB 72, 0, 2
HEX #480002

Creating a palette

Creating a palette: Pick one or both primary, pick at least one dark or light neutral, pick one or both or none secondary colors, pick one or none tertiary colors. Sample base palette.

By making selections from our primary, secondary, neutrals and tertiary colors, we can create unique color palettes for any situation.

Colors should always be appropriate for the intended audience and visual tone, and the ratio in which you use the selected colors matters too. For example, a large flood of Fire Engine Red will create a much different tone than a large flood of Second City Slate.

Tips:

  • When the audience is interacting with UIC for the first time, we always want to lead with our primary colors.
  • Once they’re more aware of who we are, we can start to incorporate the secondary and tertiary colors more.
  • Be careful not to put red and green together. Always keep a neutral color between them.

Accessibility

When using color text on a color background, ensure contrast is sufficient for the text to be legible, including for readers with color vision deficiency. The combination of Fire Engine Red and Navy Pier Blue is not recommended for text and background.

Contrast and color use are vital to accessibility. All users must be able to perceive content on the page. For more information and to check if text/background colors are ADA-compliant, visit the Compliance Contrast Checker webpage.

There is a great deal of complexity in the Web Content Accessibility Guidelines, an international standard for online accessibility. This article explains requirements for contrast and color.