Bard College at Simon's Rock: the Early College
  1. Home
  2. Guide
  3. Foundation
  4. Design
  5. Color

Color

The Color Palette

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Do

  • use palette and hex values listed below as a guide
  • consult with the Office of Communications and Marketing for any support or questions surrounding colors
  • follow the accessibility guidelines noted for each color, namely, what color and size text can be paired with each color

Don't

  • add colors to the above palette
  • use colors outside of those above
  • apply these colors in an inappropriate manner

Red

 

#be2126

Red can be paired with white, but black is not accessible.

Simon’s Rock color palette is defined by Bard red. This color is the action color. It should primarily be used for Calls to Action. In rare exceptions, it can be used as text color or as background color.

Grays

Use grays for interface items within secondary navigation, text color, and backgrounds. When possible gray tones are used instead of black and white. This creates a subtlety and elegance. White is used occasionally as text when there is dark background. Black is used as a secondary background such as the page footer and video modal window.

Light Gray

 

#efefef

Light gray can be paired with black, but white is not accessible.

Light gray is used to provide contrast to dark colors.

Medium Gray

 

#6e675f

Medium gray can be paired with white and large text black, normal sized black text is not accessible.

Medium gray is the standard text color.

Dark Gray2

 

#393530

Dark gray2 can be paired with white, black is not accessible.

Dark gray2 is used rarely.

Dark Gray

 

#262421

Dark gray can be paired with white, black is not accessible.

Dark gray is the go-to dark color to give deep contrast.

Accents

Blue

 

#1674BB

Blue can be paired with white and large text black, normal sized black text is not accessible.

Blue, and its variations, is the most frequently used of the accent colors.

Less Blue

 

#406e91

A less saturated version of blue is used on pull quotes.

Dark Blue

 

#27556f

Dark blue is used as the hover color for blue on the events carousel.

Orange

 

#ec6a1e

Orange can be paired with black and large text white, normal sized white text is not accessible.

Dark Orange

 

#b85218

Dark orange is used as the hover color for orange on the events carousel.

Yellow

 

#e2be00

Yellow is used sparingly as an accent with black. It's used on the expanded navigation and footer. It is not accessible to use with white.

Purple

 

#b83a93

Purple is used sparingly as an additional color, after blue and orange are used. Purple can be paired with white and large black text, normal sized black text is not accessible.