UI components

Colors

Palette

This is the primary color palette for all Colorado communications. These are based off of the brandCOLORADO state guidelines, but the blue colors have been lightened or darkened since they are used as the text and background colors for text. This is to meet accessibility requirements. In addition to these primary colors, each state agency can select a set of accent colors from the Accent Palettes.

Primary colors

#00A1E6

oit-color-primary-light-blue

#005980

oit-color-primary-main-blue

#4e5758

oit-color-primary-dark-grey

#d0d2d3

oit-color-primary-light-grey

#00953a

oit-color-primary-green

#ef7521

oit-color-primary-orange

#65503c

oit-color-primary-brown

#4c2c92

oit-color-primary-purple

#AC0216

oit-color-primary-red

Accent Palette Earth Tones No. 7

#7f7e73

oit-color-accent-earth-grey

#46797a

oit-color-accent-earth-teal

#90993d

oit-color-accent-earth-light-green

#72a84f

oit-color-accent-earth-green

#235c37

oit-color-accent-earth-dark-green

#235c37

oit-color-accent-earth-dark-teal

Accent Palette Mid Tones No. 12

#d1b400

oit-color-accent-midtone-dark-yellow

#f7d44b

oit-color-accent-midtone-yellow

#007480

oit-color-accent-midtone-teal

#00b44f

oit-color-accent-earth-green

#82bc00

oit-color-accent-midtone-light-green

#c9910d

oit-color-accent-midtone-light-brown

Accent Palette Vibrant Tones No. 19

#ef7521

oit-color-accent-vibrant-orange

#d8c722

oit-color-accent-vibrant-yellow

#82bc00

oit-color-accent-vibrant-green

#009add

oit-color-accent-vibrant-blue

#430098

oit-color-accent-vibrant-purple

#f6323e

oit-color-accent-vibrant-red

Text accessibility

WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text. This color contrast tool is a useful resource for testing the compliance of any color combination.

Please note that many of the colors above cannot work as text. They can be used for design, but if you need to do text there are not that many combinations using the state colors that will work. They need to be lightened or darkened.

Here are examples that do work...

Colors on a white background
oit-color-text-primary-dark-grey on white
oit-color-text-primary-brown on white
oit-color-text-primary-dark-blue on white
oit-color-text-accent-vibrant-purple on white
Neutrals on a colored background
white on oit-color-primary-dark-grey
white on oit-color-primary-brown
white on oit-color-primary-dark-blue
white on oit-color-accent-vibrant-purple