Portland Community College | Portland, Oregon Portland Community College


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.

Color development info

  • Stylesheet location: /source-v6/styles/base/_variables.scss

Primary colors


Turquoise info

$teal, #008099, rgb(0, 128, 153)
global header | action callouts | buttons | tab headings | homepage news and events | round icons | blockquote and pullquote border

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


Sapphire info

$blue, #263c53, rgb(38, 60, 83)
site title | horizontal navigation | homepage callouts | sidebar navigation headings | footer | link hover

Accent colors


Emerald info

$green, #1c8464, rgb(26, 132, 100)
highlight callouts | yes-no lists | checklist callouts | enroll buttons


Amethyst info

$purple, #70485b, rgb(112, 72, 91)
related callouts, checklist callouts


Amber info

$orange, #c7502a, rgb(199, 80, 78)
announcement callouts | link-type link | homepage announcements


Ruby info

$red, #9e0c0f, rgb(158, 12, 15)
alert callouts | yes-no lists | canceled

Supporting colors

Light gray

Light gray info

$light-gray, #e9e9e9, rgb(233, 233, 233)
info callouts | checklist callouts | callout body backgrounds | sidebar navigation | tables | fortune teller, tabs

Medium gray

Medium gray info

$medium-gray, #c1c1c1, rgb(193, 193, 193)
tables | borders | slightly darker gray if needed

Dark gray

Dark gray info

$dark-gray, #333333, rgb(51, 51, 51)
basic text color

There are some places where slightly lighter versions of $dark-gray look nicer, like in the sidebar. Don’t use these without approval:

  • $lighten-text, #595959, rgb(89, 89, 89), calculated with lighten($dark-gray, 15%)
  • $lighten-text-more, #808080, rgb(128, 128, 128), calculated with lighten($dark-gray, 30%)

Dark turquoise

Dark turquoise info

$dark-teal, #00667a, rgb(0, 102, 122)
global header | horizontal navigation | links