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...