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
Orange	PMS 144 CMYK (0,52,100,0)	#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
Secondary Red	PMS RED 032 CMYK (0,90,60,0)	#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.