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.
Jump to a component:
Primary colors
How to use for Primary colors
Add in the HTML or CSS (see “development info”).
Development info for Primary colors
Stylesheet location:
/_source/styles/base/_variables.scss
Use the HEX in HTML. See how to use Sass variables in CSS.
Example of Primary colors
Turquoise
$teal, #008099, rgb(0, 128, 153)
Turquoise text on a white background isn’t accessible – use #00819c or dark turquoise instead.
Sapphire
$navy, #263c53, rgb(38, 60, 83)
Accent colors
How to use for Accent colors
See “primary colors”.
Example of Accent colors
Emerald
$green, #1c8264, rgb(28, 130, 100)
Amber
$orange, #c7502a, rgb(199, 80, 42)
Amethyst
$purple, #3f2b54, rgb(63, 43, 84)
Ruby
$red, #9e0c0f, rgb(158, 12, 15)
Supporting colors
How to use for Supporting colors
See “primary colors”.
Example of Supporting colors
Light gray
$light-gray, #e9e9e9, rgb(233, 233, 233)
Dark gray
$dark-gray, #333333, rgb(51, 51, 51)
Medium gray
$medium-gray, #c1c1c1, rgb(193, 193, 193)
Dark turquoise
$dark-teal, #00667a, rgb(0, 102, 122)