Color

Definition

Columbia Blue (Pantone 290) is the official color of the University and the foundation upon which the Columbia brand is built. It is based on the color of the Philolexian Society, Columbia’s oldest student organization, founded in 1802.

The colors below were chosen to offer a wide range of design choices while remaining true to the official university color as a dominant hue. These colors also give considerable weight to accessibility and digital applications, the most important result of which is that we offer two primary colors that are darker than Columbia Blue.

Note that the Brand Guide has slightly different use cases for application to non-digital projects.

Usage and Specifications

The colors that round out the look and feel of Columbia products are divided into four categories: primary/secondary, accent, neutral, and transactional. Here’s how you should go about using them.

Important Things to Remember

  • Hues of color swatches vary from screen to screen.
  • Printouts from this page will not be accurate.
  • Use a contrast checker to test every fore- and background color combination to ensure compliance with accessibility contrast standards.
  • The University accessibility standard is WCAG 2.2 AA.
Columbia Design System: Columbia Blue, WCAG 2.2 AA and AAA-compliant with black text, non compliant with white text

Columbia Blue

To meet WCAG contrast standards, black text or UI components may be placed over Columbia Blue. White text or UI components do not pass WCAG standards and should never be used.

 

 

 

Primary Color

The primary color should represent at least 60 percent of the total color usage in Columbia communications. You can also use white as a primary color. Here are examples of use cases:

  • Brand bars (Banners)
  • Footers
  • H1s
Color Swatch: Primary Blue, Secondary Blue 1, Secondary Blue 2, Secondary Blue 3
Use a contrast checker to test every fore- and background color combination.

Accent Color

The accent color should constitute no more than 30 percent of the use of color in your project. Use the accent color for:

  • Icons
  • Subheads (H2-H6)
  • Rules

This color should add visual interest without creating distractions. If you’ve chosen two primary colors, consider stopping at one accent color to adhere to the "three color rule" of design, which holds that using more than three colors creates confusion and invites distraction.

sample of color

Neutral Colors

Neutral colors may make up 10 to 15 percent of color usage. Use neutrals to create a balanced palette, while also considering the brand's identity, contrast for accessibility, and overall design aesthetic:

  • background colors
  • rules
  • text
Columbia Design System Neutral Colors WCAG 2.2 AA Compliance: Neutral 1 noncompliant with black text, compliant with white text; Neural 2 noncompliant with black text, compliant with white text; Neutral 3 compliant with black text, noncompliant with white text; Neutral 4 compliant with black text, noncompliant with white text.

Transactional Colors

Use transactional colors to provide visual cues about differences in functional components. For example, a green button might indicate a task to be completed, while a red error message indicates an unsuccessful task completion.

Do not use transactional colors as secondary or accent colors or to match seasonal or holiday traditions; instead, be sure that the color you choose matches the functional meaning of the component and the status of the transaction (e.g., active, hover, etc.).

 

Transactional color swatches