Color on the Web

Using color appropriately is one of the easiest ways to ensure your communications reflect a cohesive UO brand.

Green and yellow are your go-to colors. Choose from our secondary palette when you want to enhance or support the primary colors. It’s usually best to stick with just one supporting shade.

Don’t forget to build white space into your design. Like the pauses in music, white space builds visual breathing room into your design and can help focus attention on what’s important. Always balance color, typography, and graphic elements with plenty of white space.

On the web, ensure you provide sufficient color contrast for text and graphics.


Primary Brand Colors

The University of Oregon's institutional colors are green and yellow. These colors should always figure dominantly in your design work.

NOTE: When using color builds, always use the color values listed here. They’ve been adjusted for the best reproduction in print and on screen and do not match Pantone® Color Bridge breakdowns. To help serve people with impaired vision, some of our web color values have been altered slightly from the print color values. Always use the hex color values listed here to ensure they meet accessibility standards. If you are using our Cosmic theme, you should use our web color classes as they include web formatting styles to help ensure text accessibility standards.

 

UO Green
PANTONE: 356 | CMYK: 96-26-100-15
HEX: #007030 | CLASS: palette-bg-uo-green

 

UO Yellow
PANTONE: 107 | CMYK: 0-6-99-0
HEX: #FEE11A | CLASS: palette-bg-uo-yellow

Secondary Brand Colors

We developed our secondary color palette to complement our primary colors, drawing hues from our natural environment.

Use these colors sparingly, occasionally, and always in a supporting role to our green and yellow. Never make any of these shades the predominant color for a school, center, institute, or department.

When bringing in secondary colors, take extra care not to create designs that don’t reflect the University of Oregon brand—or worse, that appear to represent another institution.

NOTE: When using color builds, always use the color values listed here. They’ve been adjusted for the best reproduction in print and on screen and do not match Pantone® Color Bridge breakdowns. For preapproved color palettes for promotion of heritage sites, please contact uobrand@uoregon.edu.
 
Legacy Green
PANTONE: 3435 | CMYK: 87-45-78-49
HEX: #104735| CLASS: palette-bg-uo-legacy-green
 
Dark Blue
PANTONE: 3025 | CMYK: 100-65-37-20
HEX: #004F6E| CLASS: palette-bg-dark-blue
 
Grass Green
PANTONE: 362 | CMYK: 75-15-100-2
HEX: #489D46| CLASS: palette-bg-grass-green
 
Light Blue
PANTONE: 7710 | CMYK: 81-13-28-0
HEX: #00A5B5 | CLASS: palette-bg-light-blue
 
Lime Green
PANTONE: 377 | CMYK: 52-6-100-0
HEX: #8ABB40 | CLASS: palette-bg-lime-green
 
Dark Gray
PANTONE: 445 | CMYK: 69-53-55-30
HEX: #4D5859 | CLASS: palette-bg-dark-gray
 
Chartreuse
PANTONE: 396 | CMYK: 15-1-100-0
HEX: #E2E11B| CLASS: palette-bg-chartreuse
 
Medium Gray
PANTONE: 429 | CMYK: 18-10-10-26
HEX: #A2AAAD | CLASS: palette-bg-medium-gray
 
Berry
PANTONE: 228 | CMYK: 40-100-40-18
HEX: #8D1D58 | CLASS: palette-bg-berry
 
Light Gray
PANTONE: N/A | CMYK: 0-0-0-17
HEX: #D8DcDA | CLASS: palette-bg-light-gray

Colored Text on Websites

It is considered best practice to limit the use of colored text on websites. Here are some of the reasons why:

  • Use colored text consistently:

    For example, if links are green, site visitors are likely to assume that all green text is clickable. To provide the best user experience, a text color should be chosen for a specific purpose and used consistently across the site.

  • Use colored text sparingly:

    When everything is emphasized, nothing is emphasized. Using color strategically makes colored items stand out more. For example, green, underlined links attract attention when they are surrounded by the typical text color used for paragraphs and headings.

  • Color is not accessible for all users:

    Many of these people are unable to distinguish between red and green. Since we use green on UO websites to indicate links, using red to show importance may cause some users to mistake the red text for a link. Read more about accessible use of color on the web below.


Accessible Use of Color on the Web

Around 300 million people worldwide are unable to perceive some color differences.

Using color as the sole indicator makes the content inaccessible to some users. For that reason, color cannot be the only indicator of importance or functionality.

Always use the HEX color values listed here to ensure they meet accessibility standards and provide sufficient color contrast for text and graphics. To help meet accessibility guidelines, some of our web color values have been altered slightly from print color values.

Color Guidelines for Digital Accessibility


Do's and Don'ts of Color Use

✓ DO
  • Use our primary green and yellow dominantly in all communications.

  • Use accessible color combinations that offer sufficient contrast for all audiences.

  • Include plenty of white space.

  • Use the color builds provided in this guide.

  • Refer to the ratio below when using color in your designs. It’s not an exact science—UO green and yellow don’t have to be in equal proportion. Accent colors are entirely optional—but can help you keep your designs balanced.

Color Ratio Chart
✗ DON'T
  • Don't change the colors of our protected brand marks, including logos and the mascot mark.

  • Don't make secondary colors prominent in your designs.

  • Don't use color as the only indicator of importance or functionality on the web. Not everyone sees color the same way. Call out important information by adding an additional visual cue (icon, underline, etc.).

  • Don't use color combinations that are not accessible or are hard to read, such as white text on a yellow background.

  • Don't use color combinations that appear to represent other institutions.

  • Don't alter the color builds provided in this guide, or rely on software programs to convert colors from one format to another.