Portland Community College | Portland, Oregon Portland Community College

MyPCC colors

Starting in 2011 for its 50th anniversary, PCC began updating its visual identity. Turquoise and sapphire are the new signature colors, with other accent colors used where needed. In February 2016, the Web Team updated the main PCC website to use this new visual identity. In June 2016, MyPCC followed with an update of its own.

Development info

  • Stylesheet location: /pcc/styles/helpers/_variables.scss

Primary colors

Turquoise

$teal, #008099, rgb(0, 128, 153)
header | buttons | term-to-term checklist | back buttons | financial aid dashboard

Turquoise text on a white background isn’t accessible – use #00819c (lightest turquoise on white possible) or $dark-teal instead.

Sapphire

$blue, #263c53, rgb(38, 60, 83)
sites and courses header | button hover | link hover

Accent colors

Accent colors in MyPCC are most often used in icons or for the background of alert messages. There are different accent colors on the main PCC website, used in callouts.

Emerald

$green, #16a67d, rgb(22, 166, 125)
“good” icons | feedback callouts

Gold

no variable, #ffd13e, rgb(255, 209, 62)
“caution” icons

Ruby

no variable, #e0563f, rgb(158, 12, 15)
“warning” icons

Rose quartz

no variable, #fddbda, rgb(253, 219, 218)
notice callouts | don’t get deleted channel

Supporting colors

Light gray

$light-gray, #e9e9e9, rgb(233, 233, 233)
channel titles | input boxes | term-to-term checklist | highlight callouts | channel navigations | accordions | message board

Medium gray

$medium-gray, #c1c1c1, rgb(193, 193, 193)
content area background | table headings

Dark gray

$dark-gray, #333333, rgb(51, 51, 51)
basic text color | financial aid dashboard

Dark turquoise

$dark-teal, #00667a, rgb(0, 102, 122)
links | phone navigation – active | channel titles