Style Guidebook: Color

Consistent user experience promotes our professional standards, and following the color standards of the College provides a consistent experience for our visitors. These standards help to ground our visitors, creating a visual foundation as they journey through our content.

The College defines several colors as the standards to be used with any content. We have two primary colors and five accent colors, listed below. Accent colors are unique to the College, and are to be used sparingly to provide visual interest in various design applications.  Each is listed with their common color attributes, each attribute based on print or web usage:

  • Hexadecimal colors, usually shortened to “hex” colors, are the primary colors used on the web. They are identified with the “#” symbol, followed by a three or six digit code.
  • RGB colors can be used in digital printing, but are primarily used for the web and other displayed technologies (such as PowerPoint).
  • CMYK is used exclusively for printed materials, and never for web.
  • The Pantone Management System (PMS) is a library of colors exclusive to printed materials, never for web use. It allows print shops to reproduce a common, exact color no matter what program created it.

Primary Color: CSU Green

PMS 357 CP
CMYK: 98, 40, 100, 46
RGB: 30, 77, 42
#1e4d2b

Primary Color: CSU Gold

PMS 617 CP
CMYK: 11, 6, 64, 13
RGB: 200, 195, 115
#c8c372

Accent: PMS 323 CP

CMYK: 100, 47, 59, 33
RGB: 34, 84, 86
#225456

Accent: PMS 7711 CP

CMYK: 100, 4, 30, 0
RGB: 12, 163, 182
#0ca3b6

Accent: PMS 021 CP

CMYK: 0, 65, 100, 0
RGB: 217, 120, 45
#d9782d

Accent: PMS 45-7 CP

CMYK: 0, 85, 86, 0
RGB: 209, 79, 58
#d14f3a

Accent: PMS 7405 CP

CMYK: 0, 11, 97, 2
RGB: 242, 213, 53
#f2d535

Why do we want to use these colors?

We want our visitors to have a consistent experience, no matter if they are on our websites or looking at our printed materials. One of the foundations of doing that is to have a persistent plan for styles across all media, and color is one of the cornerstones of that plan.

The CSU Green and Gold, particularly, inform the visitor that they are still looking at Colorado State University content. The consistent use of color helps us to maintain our professionalism, and sends a message that, even among different departments, we are one College.

A note about accessibility and color

As we point out in our accessibility standards, we want to make sure that our website is open and useful for anyone who visits it. Color plays an important role in how useful a site is for many people, especially those with color vision disabilities. We have a adopted a standard of using colors with accessibility in mind for all users.

The charts in this section are provided by the World Wide Web Consortium, and offer a look at how colors are perceived by those with color blindness or impairment. For more information, click here.

full color, normal vision
full color, normal vision
Red-green color blindness, protanopia
Red-green color blindness, protanopia
Blue-yellow color blindness, tritanopia
Blue-yellow color blindness, tritanopia
Rare no color perception, achromatopsia
Red-green color blindness, protanopia

Color contrast, the difference in luminance or color between objects, is determined by a ratio of colors. The higher the number compared to one, the better the contrast is.

For example, compare the green and white ratio as “AAA,” which is great contrast, with the gold and white, which fails the test. This page offers a great explanation of what the WCAG guidelines mean in practice.

AAA contrast:
9.76:1 ratio

Contrast fail:
1.83:1 ratio

Overall Website

Our website styles are built into the Cascading Style Sheets (CSS) that control the look and feel of all of our sites. Text, headings, links, footers, and anything else that uses a set color is specified based on the color standards above.

While creating new pages or content, keep these defaults in mind. It is not an exhaustive list, only the main components of the websites.

Background Color: The College website uses a slightly gray background, hex color #f1f1f1, for the default page background color. Pure white (#ffffff) can be very harsh on the eyes, and reading any amount of text over a long period of time on a pure white background can affect those with visual issues.

Page Background:
#f1f1f1

Page Headers and Text:
#1e4d2b

Main Header and Footer Background:
#1e4d2b

Readability

We want to make sure our visitors can read our content easily, and it is important to make sure that color choices do not make reading more difficult. When designing content, make sure that there is sufficient contrast between the text and the background colors.

Using the right color combinations also plays a part in accessibility for those who might have difficulty with the visual aspects of our webpages. As a part of the College's Accessibility Standards, we want to create pages that are more accessible to everyone, and using the correct color contrast plays a large part in that effort.

Our standard is based on the World Wide Web Consortium's Web Content Accessibility Guidelines (WCAG). Read more about their text contrast guidelines here.

No

No

Yes!

Using inconsistent colors in text

Think about a red, bolded word inside a paragraph. The viewer's eye goes right to it, almost in emergency mode.

But that can be very distracting to many viewers, and makes finding the truly valuable information more difficult. Using color for emphasis can affect accessibility as well, as those with visual problems such as colorblindness cannot see the text.

We have adopted a standard of using bold words instead of using color to show important information. By using bold text instead, the emphasis is far easier to find.

Using bold text instead of a color emphasis also works better for accessibility, based on WCAG guidelines. Users with color blindness, for example, would have a more positive experience with bold text over trying to read a particular color they have trouble seeing.

Bad Example:

The Walter Scott, Jr. College of Engineering must be able to allow a new paint coverage of the main staircase. It is vital to our success.

Better:

The Walter Scott, Jr. College of Engineering must be able to allow a new paint coverage of the main staircase. It is vital to our success.

Using inconsistent colors in design

Color can add impact to designed pieces by grabbing a visitor's attention. But using inconsistent colors for everything is distracting, makes content less accessible, and sends the message that we are unprofessional.

By limiting our colors to a primary and an accent color, in most cases, we come across as more professional.

In the top example, we are using CSU Green and CSU Gold. Even with an "outlined" box design instead of one filled with color, it is still recognizable since the colors are the same as the rest of the site.

This header is on-brand.

This header is off-brand.