Web Color

When designing for the web, we have specific resources to ensure accessibility and ease of use.

Hosted Brand Assets for Web Colors

Looking for an easy way to implement our brand colors on the web? Our university-specific color codes have been added to the collection of hosted brand assets, also known as a content delivery network (CDN), so you can implement them to your website with simplified variable names. 

The color codes nomenclature uses a luminosity scale. The base colors are named as they always have been (e.g., il-orange). Tints are named with higher numbers (e.g., il-orange-80) and shades are named with lower numbers (e.g., il-orange-30). The scale reflects a familiar range from dark to light and allows for adding new options between. 

Use these colors for your website projects in their defined and proper use cases. Do not use other non-brand colors for your website design.  

Find the web color documentation on the hosted brand assets page. 

Accessibility

Web Color Pairings for Accessibility

To help you create consistent, accessible designs, use the color pairings below. Color pairings change based on the background color. University websites should not introduce additional supporting colors, unless used in charts, graphs, or infographics. Below are several examples of accessible color pairings as well as guidance for each color background.

White background

Color	Variable Name	Hex Code	Regular Font Size	Bold Font Size	Proper Usage
	white	#ffffff	Not applicable	Not applicable	Background
	il-storm-10	#252525	All sizes	All sizes	Default body text
	il-industrial	#1d58a7	All sizes	All sizes	Default body text link
	il-altgeld	#c84113	All sizes	All sizes	Default body text link hover/focus
	il-blue	#13294b	All sizes	All sizes	Default heading
	il-blue	#13294b	All sizes	All sizes	Default heading link
	il-orange	#ff5f05	Accessible at 24px or larger	Accessible at 18.66px or larger	Default heading link hover/focus

Limited use options

Color	Variable Name	Hex Code	Regular Font Size	Bold Font Size	Proper Usage
	il-orange	#ff5f05	Accessible at 24px or larger	Accessible at 18.66px or larger	Specialty heading
	il-orange	#ff5f05	Accessible at 24px or larger	Accessible at 18.66px or larger	Specialty heading link
	il-blue	#13294b	All sizes	All sizes	Specialty heading hover/focus

Gray background

Color	Variable Name	Hex Code	Regular Font Size	Bold Font Size	Proper Usage
	il-storm-95	#f4f4f4	Not applicable	Not applicable	Background
	il-storm-10	#252525	All sizes	All sizes	Default body text
	il-industrial	#1d58a7	All sizes	All sizes	Default body text link
	il-altgeld	#c84113	All sizes	All sizes	Default body text link hover/focus
	il-blue	#13294b	All sizes	All sizes	Default heading
	il-blue	#13294b	All sizes	All sizes	Default heading link
	il-altgeld	#c84113	Accessible at 24px or larger	Accessible at 18.66px or larger	Default heading link hover/focus

Limited use options

Color	Variable Name	Hex Code	Regular Font Size	Bold Font Size	Proper Usage
	il-altgeld	#c84113	Accessible at 24px or larger	Accessible at 18.66px or larger	Specialty heading
	il-altgeld	#c84113	Accessible at 24px or larger	Accessible at 18.66px or larger	Specialty heading link
	il-blue	#13294b	All sizes	All sizes	Specialty heading hover/focus

Orange background

Color	Variable Name	Hex Code	Regular Font Size	Bold Font Size	Proper Usage
	il-orange	#ff5f05	Not applicable	Not applicable	Background
	il-blue	#13294b	All sizes	All sizes	Default body text
	il-blue	#13294b	All sizes	All sizes	Default body text link
	il-blue	#13294b	All sizes	All sizes	Default body text link hover/focus
	white	#ffffff	All sizes	All sizes	Default heading
	white	#ffffff	All sizes	All sizes	Default heading link
	il-blue	#13294b	Accessible at 24px or larger	Accessible at 18.66px or larger	Default heading link hover/focus

Blue background

Color	Variable Name	Hex Code	Regular Font Size	Bold Font Size	Proper Usage
	il-blue	#13294b	Not applicable	Not applicable	Background
	white	#ffffff	All sizes	All sizes	Default body text
	white	#ffffff	All sizes	All sizes	Default body text link
	il-orange	#ff5f05	All sizes	All sizes	Default body text link hover/focus
	white	#ffffff	All sizes	All sizes	Default heading
	white	#ffffff	All sizes	All sizes	Default heading link
	il-orange	#ff5f05	Accessible at 24px or larger	Accessible at 18.66px or larger	Default heading link hover/focus

Orange gradient background

Color	Variable Name	Hex Code	Regular Font Size	Bold Font Size	Proper Usage
	il-orange-gradient	#fcb316 to #ff5f05	Not applicable	Not applicable	Background
	il-blue	#13294b	All sizes	All sizes	Default body text
	il-blue	#13294b	All sizes	All sizes	Default body text link
	il-blue	#13294b	All sizes	All sizes	Default body text link hover/focus
	white	#ffffff	All sizes	All sizes	Default heading
	white	#ffffff	All sizes	All sizes	Default heading link
	il-blue	#13294b	Accessible at 24px or larger	Accessible at 18.66px or larger	Default heading link hover/focus

Blue gradient background

Color	Variable Name	Hex Code	Regular Font Size	Bold Font Size	Proper Usage
	il-blue-gradient	#1d58a7 to #13294b	Not applicable	Not applicable	Background
	white	#ffffff	All sizes	All sizes	Default body text
	white	#ffffff	All sizes	All sizes	Default body text link
	il-arches-90	#C4E9F5	All sizes	All sizes	Default body text link hover/focus
	white	#ffffff	All sizes	All sizes	Default heading
	white	#ffffff	All sizes	All sizes	Default heading link
	il-arches-90	#C4E9F5	Accessible at 24px or larger	Accessible at 18.66px or larger	Default heading link hover/focus

Altgeld orange for accessibility

Altgeld orange was built to serve as an accessible option when Illini orange does not provide enough color contrast — for example, when using orange type at a small size or when orange is on light gray. It provides the appropriately accessible contrast to be inclusive of our diverse audience needs. Only use Altgeld orange to aid in meeting contrast and legibility accessibility requirements.