1. Home
2. Foundations
3. Color

Color

Use color to enhance meaning, but never rely on color alone to convey information.

Enhance meaning in your interface with color.

Usage

Use our defined color palette throughout your interfaces. Always pair color with explicit text or indicators.

Apply by role

Use colors by their role or meaning, not by their specific color name.

Each color has a CSS custom property to apply colors consistently across our interfaces.

body {
  background: var(--pl-color-bg-default); /* instead of --pl-color-white */
  color: var(--pl-color-fg-default); /* instead of --pl-color-gray-dark */
}

The CSS property background will be White and color Gray Dark.

fg is short for foreground.

bg is short for background.

Use foreground colors for text and icons. Use background colors for surfaces like pages, boxes, and overlays. Make sure to use the properties together to meet accessibility color contrast requirements.

Accessibility

Use a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Each color comes with a suggested foreground color(s) that meets accessibility standards, shown as a dot with a contrast ratio.

Check your contrast ratio with the WebAIM Contrast Checker.

Every color

Example	Description	Custom Property & Hex
15.57	Penn Blue Use as the primary brand color for the University of Pennsylvania.	var(--pl-color-penn-blue) #011F5B
8.92	Penn Red Use as the secondary brand color for the University of Pennsylvania.	var(--pl-color-penn-red) #990000
12.30 11.29	Gray Dark Use for primary text and icons in your interface.	var(--pl-color-fg-default) var(--pl-color-gray-dark) #2D3545
6.42 5.89	Gray Use for secondary content that provides context but isn't critical to understanding the interface.	var(--pl-color-fg-subtle) var(--pl-color-gray) #595F6A
11.29	Gray Light Use to create subtle visual breaks between content sections.	var(--pl-color-bg-subtle) var(--pl-color-gray-light) #F5F5F6
10.65	Gray Blue Light Use for subtle blue-tinted backgrounds that align with Penn's brand.	var(--pl-color-bg-subtle-brand) var(--pl-color-gray-blue-light) #EEEEF4
12.30	White Use as the main background color or as foreground color on dark backgrounds.	var(--pl-color-bg-default) var(--pl-color-white) #FFFFFF
7.53 5.80	Blue Use for important interface controls and links within text.	var(--pl-color-fg-accent) var(--pl-color-blue) #0E5696
5.80	Blue Light	var(--pl-color-bg-accent) var(--pl-color-blue-light) #D4E4F2
5.78 5.27	Green Use to show success or positive messages.	var(--pl-color-fg-success) var(--pl-color-green) #267434
5.27	Green Light	var(--pl-color-bg-success) var(--pl-color-green-light) #F1F7E1
5.15 4.50	Orange Use to draw attention to important text or icons.	var(--pl-color-fg-attention) var(--pl-color-orange) #BD4718
4.50	Orange Light	var(--pl-color-bg-attention) var(--pl-color-orange-light) #FEEDDD
7.88 6.21	Purple Use to indicate completed tasks or workflows.	var(--pl-color-fg-info) var(--pl-color-purple) #80317F
6.21	Purple Light	var(--pl-color-bg-info) var(--pl-color-purple-light) #F2DFED

Relevant guidelines

• Test your contrast between text and background to meet Penn's Digital Accessibility Policy requirements.