Color

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

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

Sapphire info

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

Accent colors

Emerald

Emerald info

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

Amethyst

Amethyst info

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

Amber

Amber info

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

Ruby

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