Color Palette
Welcome to the Evergreen web colors palette. You will find "swatches" of colors carefully selected for use on the college's web pages. The Web Team strongly encourages use of the palette we've developed to create an integrated look and feel on all official Evergreen pages. Consistent use of colors provides users of your web pages with an experience that's intuitive, predictable and connected to Evergreen.
If you have questions about using color on web pages or would like to ask us about using a unique color in your section of the Evergreen website, please contact us by email or call Brian Mathis (Information & Media Designer) at 867-6095.
The hexadecimal code (#HEX in the key) is used by HTML documents to refer to the swatch color.
Each swatch contains three different types of notes:
- current usage notes describe what the swatch color is currently used for on the site, and are italicized
- suggested usage notes describe appropriate uses for the swatch color (although there may be appropriate uses not listed on this page)
- discouraged usage notes refer to inappropriate uses of the swatch color and are bold
Standard V3 Template Page Colors:
KEY:
#HEX
- current usage notes are in italic
- suggested usage notes are not italic
- discouraged usage notes are bold
#336633
- header backgrounds (h1, h2, h3, etc.) or text
- link inactive state
- should NOT be used for non-linked text, or as background for large elements!
#A89A77
- link hover state
- table header or row background
#FFFFFF
- page background
- text on dark backgrounds
- should NOT be used for page text!
#000000
- default text color
- text
- borders
- should NOT be used for ANY background! (note the eye strain reading white text off a black background)
#6E5B28
- main page header: link hover state
- borders
- table header background
- header background or text
- should NOT be used for page background!
#EFF8EF
- leftnav menu: link hover state background
- table row background
- link hover state
- text on dark green backgrounds
#7C1300
- page header: text
- table header background
- header background or text
- should NOT be used as page background OR as backgroundfor large elements!
#B6AF7D
- link hover state
- table row background
- table header background
- header background
- background for large elements
Evergreen Home Page/ v4 Templates & CMS
#46502B
- New Evergreen Green
- usage guidelines in development
#7C1300
- page header: text
- table header background
- header background or text
- should NOT be used as page background OR as background for large elements!
#B9DAE8
- backgrounds: pale blue
- "what's new" background
- should NOT be used as text color OR as background for large elements!
#996600
- "tabs" background
- home page main tabs background
- usage guidelines in development
Catalog Colors:
#EF7066
- "cancelled!" text
- this is an alert color and should only be used for elements like "stop!", "cancelled!", "warning!", etc.
#DDEECC
- program information details: background
- table row background
- link hover state
- text on dark green backgrounds
#F3FFEF
- program updates: background
- table row background
- text on dark green backgrounds
#FFEEAA
- quarters offered: background
- table row background
- link hover state
- text on dark brown backgrounds
#FFEFCF
- fall quarter table row background
- table row backgrounds
- link hover state
- text on dark brown or reddish backgrounds
#DFF0FF
- winter quarter table row background
- table row backgrounds
- link hover state
#EFFFC8
- spring quarter table row background
- table row backgrounds
- link hover state
- text on dark green backgrounds