Color Codes and Information

The styles in the resource use Penn State's recommended colors, but they are all customizable. By simply changing the color's hex code (for example, #000000 for black), you can create styles with nearly any color you want. We recommend using a consistent color palette, using colors that align with Penn State's style guide, and checking contrast to make sure people with low vision or color blindness can still understand the content. For more information about how to use the colors, please see Penn State's Brand Book, which is linked in the Resources section below.

 

Penn State Colors

The following tables provide several palettes containing colors used frequently on Penn State's websites.

Table 1: Primary Brand Palette
Color hex code Color name
#FFFFFF  White Out
#001E44  Nittany Navy
#1E407C  Beaver Blue
#96BEE6  Pugh Blue (secondary color)

 

 

Table 2: Classic Accent Palette
Color hex code Color name
 #A2AAAD PA Limestone
#314D64 PA Slate
#4A7729  Penn's Forest
#444444  Old Coaly 
#6A3028  Land Grant
#BF8226  Lion's Roar
#B88965  Lion Shrine
#AC8DCE  Stately Atherton
#BC204B   Original 1887

 

 

Table 3: Vibrant Accent Palette
Color hex code Color name
#009CDE  PA Sky
#3EA39E PA Creek
#FFD100  Bright Keystone
#E98300  Invent Orange
#F2665E  Dawn of Discovery
#491D70  Perpetual Wonder
#008755  Green Opportunity
#99CC00  Future's Calling
#000321  Endless Potential

 

 

Table 4: Body Text Colors
Color hex code Color name
#001E44  Nittany Navy
#1E407C  Beaver Blue
#314D64  PA Slate
#444444  Old Coaly
#000321  PA Potential

 

Table 5: Light Background Colors
Color hex code Color name
#e4e5e7  PA Limestone Light
#ccdae6  PA Slate Light
#ccf0ff  PA Sky Light
#cfeceb  PA Creek Light
#f9eddc  Lion's Roar Light
#f7f2ee  Lion Shrine Light

 

Table 5: Max Light Background Colors
Color hex code Color name
#f2f2f4  PA Limestone Max Light
#eef3f7  PA Slate Max Light
#e6f7ff  PA Sky Max Light
#edf8f7  PA Creek Max Light
#fffaf2  Lion's Roar Max Light
#fdfbf5  Lion Shrine Max Light

 

 

Best Practice: Use Good Color Contrast

Remember, not everyone sees color the same so don't use color alone to convey information. And since not everyone has perfect eyesight, check the color contrast by using the built-in Canvas accessibility checker tool. The contrast ratio between foreground and background text, as well as between elements in a graph, should be at least 4.5:1. 

 

Resources