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