Skip to main content

Colors

The Cornell University brand has color standards for print and web. Each color standard has two sets of colors: primary and secondary.

Accessibility Requirements

When designing for the web, all web content must conform to the accessibility standards set by the university in Policy 5.12: Web Accessibility Standards.

Based on Web Content Accessibility Guidelines (WCAG 2.0), the criteria for level AA conformance requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, greater than 24 pixels or 19 pixels and bold. The chart below provides approved brand color combinations that meet WCAG 2.0 level AA standards.


Our Color Palette

Alongside our logo, use of approved colors ensures that print and web materials reflect a coherent Cornell brand.

The graphic depicts general guidance for use of color in layout. While not an exact equation, the percentages should be referenced when working on design.

Examples are provided below as a reference for web layouts.

Breakdown of color palette classified by primary (20%, 55% and 15%), secondary (7%) and accent (3%) colors | Cornell

Primary Palette

Used for ~90% of your design or layout.

Primary colors are the officially recognized color palette for the university. These colors are critical to leverage the Cornell brand and provide clear university consistency. Logos and lockups may only be represented in carnelian, black or white.

Color Print Web (Hex) Web accessible combinations Example uses
Carnelian
PMS 187
CMYK (0,100,79,20)
#B31B1B
  • White (#FFFFFF)
  • Light Grey (#F7F7F7)
  • Cornell seal
  • Banners and backgrounds
  • Headlines
Dark Grey
PMS COOL GREY 11
CMYK (48,36,24,66)
#222222
  • White (#FFFFFF)
  • Light Grey (#F7F7F7)
  • Cornell seal
  • Banners and backgrounds
  • Headlines and body text
White
CMYK (0,0,0,0)
#FFFFFF
  • Carnelian (#B31B1B)
  • Dark Grey (#222222)
  • Cornell seal
  • Banners and backgrounds
  • Headlines or body text on dark backgrounds

Secondary Palette

Used for ~7% of your design or layout.

These neutral hues pair perfectly with the primary palette. Use these as supplementary colors rather than driving colors in layout and communications.

Color Print Web (Hex) Web accessible combinations Example uses
Light Grey
#F7F7F7
  • Carnelian (#B31B1B)
  • Dark Grey (#222222)
  • Backgrounds
  • Secondary text on dark backgrounds
Dark Warm Grey
PMS 403
CMYK (14,18,22,42)
#A2998B
  • White (#FFFFFF)
  • Black (#000000)
  • Neutral background areas
Sea Grey
PMS 5635
CMYK (29,8,25,24)
#9FAD9F
  • Black (#000000)
  • Neutral background areas

Accents

Used for ~3% of your design or layout.

Although our primary and secondary palettes should guide most layouts, in certain instances other colors may be needed. For those circumstances, refer to the accent palette. These colors should not be used as full-color bleeds and should be used periodically and in moderation.

Note: In no instance should accent colors become the primary color for a school, center, institute or department.

Color Print Web (Hex) Web accessible combinations Example uses
Blue / Link blue
PMS PROCESS BLUE
CMYK (100,13,1,2)
#006699
  • White (#FFFFFF)
  • Light grey (#F7F7F7)
  • Links
  • Buttons
Green
PMS 369
CMYK (67,0,98,5)
#6EB43F

Graphic elements only

Highlights important features, but is used sparingly

  • Visual style elements, such as line breaks or color blocks without text
  • Small fill areas
#4B7B2B

Any text size

  • White (#FFFFFF)
  • Light grey (#F7F7F7)
#578E32

Large text only

  • White (#FFFFFF)
Orange
PMS 144
CMYK (0,52,100,0)
#F8981D

Graphic elements only

Highlights important features, but is used sparingly

  • Visual style elements, such as line breaks or color blocks without text
  • Small fill areas
#D47500

Large text only

  • White (#FFFFFF)
  • Light grey (#F7F7F7)
Secondary Red
PMS RED 032
CMYK (0,90,60,0)
#EF4035

Graphic elements only

Highlights important features, but is used sparingly


  • Visual style elements, such as line breaks or color blocks without text
  • Small fill areas
#DF1E12

Any text size

  • White (#FFFFFF)
  • Light grey (#F7F7F7)
Navy
PMS 7463
CMYK (100,62,12,62)
#073949
  • White (#FFFFFF)
  • Light grey (#F7F7F7)
  • Neutral background areas

Examples

These simplified web page layout examples show the ratio of primary, secondary and accent colors to each other.

webpage design preview shows thin red header, red circle and hero banner with scroll option, followed by red block for header text, gray block for subheading text, followed by a small image to the left with orange block for subheading text and four dark gray blocks for body text and gray footer. | Cornell
webpage design preview shows a thin red header, white circle and full width hero placeholder, followed by a red block for header text and two gray blocks for subheading text, followed by three columns of icons and gray caption text, followed by green footer. | Cornell
webpage design preview shows thin red header, red cricle with red block for placeholder text, followed by dark gray block for header text, followed by three columns showing placeholder photos with three cartoon faces, followed by red block for subheading text. Next block shows light gray background with organge block for subheading text and four dark gray blocks for body text, followed by a gray footer.| Cornell
webpage design preview shows red block for header text adjusted left with a red circle in right corner, followed by a two column layout: on the left there is a light gray background with placeholder photo of cartoon face and another gray box; on the right there are four gray blocks as subheading text, a green block for subheading text followed by four light gray boxes and a blue box for more text, followed by a placeholder image of cartoon mountains and a gray footer.| Cornell
webpage design preview shows a thin red header followed by a red circle and red block for text adjusted left, followed by a light gray wide hero with cartoon drawing of two faces and two white blocks for header text, followed by a thin red line, then cartoon images of faces and a mountain in three columns, each with their own orange block and gray block of subheading text, followed by a gray footer.| Cornell
webpage design preview shows thin red header followed by a wide hero image of cartoon mountains with an overlay of a white circle and white block for header text, followed by a light gray divider line, followed by a cartoon chat box icon on the left with text aligned on its right with a red block, four light gray blocks, blue block and two light gray blocks for subheading text, followed by a green footer. | Cornell

For more information about using approved colors, please request a brand consultation.