Color System

Our color system supports color schemes (collections of colors) that can be used to style all components of an application or website. The State of Colorado Brand Guidelines include:

• Primary Color Palette. Primary colors are seen in State logos and used across much of our digital ecosystem.
• Department Accent Palettes. More than two dozen (24) palettes are available in a variety of themes. In general, departments should pick one palette and stick to it. But, it is okay to "mix-and-match" from multiple palettes if needed. If your department has already adopted a palette, please use it. Consistency is key. Accent palettes are available based on the following themes:
  • Nature (Earth Tones)
  • Humanity (Mid Tones)
  • Innovation (Vibrant Tones)

Color FAQs

Should I always opt for black-on-white or white-on-black for text?

No. In most web applications and sites, using our primary-dark or primary-darker colors (or dark grey) for text on a subtly off-white background would be a better choice. When you use "pure" colors, like white and black, the contrast may be too high for some people. This type of contrast is often called "total" contrast. When contrast is really high, words can look distorted, screens may have more glare, and people with dyslexia and other differences might have a more difficult time engaging with your content. For other documents, like word processing documents, black on white is acceptable and appropriate in most instances.

The Brand Guidelines said I can use the old (pre-2019) colors - is this true?

No. You may have an outdated copy of the brand guidelines. To see the latest brand guidelines, visit State Branding. The use of prior brand elements is not acceptable on any digital solution in active use. If you are unable to update an existing resource to comply with current Brand Guidelines, please reach out to DPA_IDSCustomerService@state.co.us for suggestions. If you are creating a new resource, please only use the current palettes.

Do All Brand Colors Meet Contrast Minimums?

It depends on how you use them! A significant portion of brand colors have good or great contrast when paired with light (white) or dark (black) fonts. 
 

Brand Colors & Contrast

The table below shows the contrast ratio (expressed as a decimal) for State of Colorado brand colors (background) with white and black text (foreground). 

• Standard Text 
  • Minimum (WCAG AA): 4.5
  • Enhanced (WCAG AAA, Recommended): 7.0
• Large Text 
  • Minimum (WCAG AA): 3.0
  • Enhanced (WCAG AAA, Recommended): 4.5
• Non-Text Components:
  • Minimum (WCAG AA): 3.0
  • Recommended: 4.5

Color	Brand Palette	Contrast Ratio with White Text	Contrast Ratio with Black Text
#c3002f	Primary	6.25	3.36
#001970	Primary	15.29	1.37
#6d3a5d	Primary	8.70	2.41
#245d38	Primary	7.78	2.70
#ffd100	Primary	1.46	14.37
#7a853b	Primary	4.00	5.25
#35647e	Primary	6.41	3.28
#46797a	Nature/Earth	4.91	4.28
#546121	Nature/Earth	6.76	3.11
#6a3833	Nature/Earth	9.43	2.23
#65503c	Nature/Earth	7.59	2.77
#84322c	Nature/Earth	8.49	2.47
#ad431c	Nature/Earth	5.84	3.60
#525249	Nature/Earth	7.89	2.66
#483627	Nature/Earth	11.46	1.83
#bc6123	Nature/Earth	4.31	4.87
#6d3a5d	Nature/Earth	8.70	2.41
#7f7e73	Nature/Earth	4.09	5.13
#ce9f51	Nature/Earth	2.41	8.70
#a2a467	Nature/Earth	2.61	8.04
#3f5b57	Nature/Earth	7.38	2.85
#95a495	Nature/Earth	2.62	8.02
#739849	Nature/Earth	3.32	6.32
#5f7774	Nature/Earth	4.80	4.38
#235c37	Nature/Earth	7.90	2.66
#72a84f	Nature/Earth	2.83	7.43
#90993d	Nature/Earth	3.08	6.81
#cc9700	Nature/Earth	2.63	7.99
#dc5f13	Nature/Earth	3.69	5.69
#ada300	Nature/Earth	2.62	8.02
#9d830f	Nature/Earth	3.69	5.69
#dc5f13	Innovation/Vibrant	3.69	5.69
#9d830f	Innovation/Vibrant	3.69	5.69
#ada300	Innovation/Vibrant	2.62	8.02
#c9910d	Innovation/Vibrant	2.79	7.54
#d1b400	Innovation/Vibrant	2.05	10.24
#b2bcaf	Innovation/Vibrant	1.96	10.71
#ad431c	Innovation/Vibrant	5.84	3.60
#815374	Innovation/Vibrant	6.14	3.42
#4dc1df	Innovation/Vibrant	2.10	10.01
#82bc00	Innovation/Vibrant	2.30	9.14
#b9be10	Innovation/Vibrant	2.01	10.44
#65503c	Innovation/Vibrant	7.59	2.77
#525249	Innovation/Vibrant	7.89	2.66
#00b44f	Innovation/Vibrant	2.75	7.64
#007480	Innovation/Vibrant	5.51	3.81
#a9aba0	Innovation/Vibrant	2.33	9.02
#407cca	Innovation/Vibrant	4.24	4.95
#7c97ab	Innovation/Vibrant	3.06	6.87
#739849	Innovation/Vibrant	3.32	6.32
#84322c	Innovation/Vibrant	8.49	2.47
#f6323e	Innovation/Vibrant	3.86	5.44
#ef7521	Innovation/Vibrant	2.90	7.24
#f7d44b	Innovation/Vibrant	1.45	14.47
#fecf84	Innovation/Vibrant	1.45	14.47
#999899	Innovation/Vibrant	2.87	7.31
#d3ccbc	Innovation/Vibrant	1.60	13.13
#d8c722	Innovation/Vibrant	1.73	12.11
#f6b333	Innovation/Vibrant	1.84	11.41
#eb6851	Innovation/Vibrant	3.17	6.63
#d1ddba	Innovation/Vibrant	1.42	14.76
#25cad3	Innovation/Vibrant	2.01	10.47
#101e8e	Innovation/Vibrant	13.14	1.60
#430098	Innovation/Vibrant	12.41	1.69
#009add	Innovation/Vibrant	3.15	6.67
#6cc049	Innovation/Vibrant	2.26	9.27
#c2ca7f	Innovation/Vibrant	1.74	12.05
#8fc6e8	Innovation/Vibrant	1.84	11.41
#bd3b42	Innovation/Vibrant	5.43	3.87
#4e5758	Innovation/Vibrant	7.43	2.83
#007498	Innovation/Vibrant	5.31	3.95
#488bc9	Innovation/Vibrant	3.61	5.81
#d73239	Innovation/Vibrant	4.77	4.40

Example Tokens

The primary color palette is recommended for most executive branch agencies. The example provided here is intended to help you understand how you can use the State's color system in the context of USWDS or other token-based systems.

Blue with Red Secondary

@use "uswds-core" with ($theme-color-primary-lighter:#d9e8f6,$theme-color-primary-light:#aacdec,$theme-color-primary:#0054a2,$theme-color-primary-vivid:#173bb3,$theme-color-primary-dark:#001970,$theme-color-primary-darker:#001049,$theme-color-secondary-lighter:#f8dede,$theme-color-secondary-light:#ffabab,$theme-color-secondary:#b50909,$theme-color-secondary-vivid:#d40202,$theme-color-secondary-dark:#950707,$theme-color-secondary-darker:#6f0101,$theme-color-accent-cool-lighter:#e7f2f5,$theme-color-accent-cool-light:#cbdde7,$theme-color-accent-cool:#85aabe,$theme-color-accent-cool-dark:#356580,$theme-color-accent-cool-darker:#1f465c,$theme-color-accent-warm-lighter:#fdfcf0,$theme-color-accent-warm-light:#fcf9d9,$theme-color-accent-warm:#ffec87,$theme-color-accent-warm-dark:#FFD100,$theme-color-accent-warm-darker:#dfa902)

:root{--primary-lighter:#d9e8f6; --primary-light:#aacdec; --primary:#0054a2; --primary-vivid:#173bb3; --primary-dark:#001970; --primary-darker:#001049; --secondary-lighter:#f8dede; --secondary-light:#ffabab; --secondary:#b50909; --secondary-vivid:#d40202; --secondary-dark:#950707; --secondary-darker:#6f0101; --accent-cool-lighter:#e7f2f5; --accent-cool-light:#cbdde7; --accent-cool:#85aabe; --accent-cool-dark:#356580; --accent-cool-darker:#1f465c; --accent-warm-lighter:#fdfcf0; --accent-warm-light:#fcf9d9; --accent-warm:#ffec87; --accent-warm-dark:#FFD100; --accent-warm-darker:#dfa902;}

Blue with Green Secondary

@use "uswds-core" with ($theme-color-primary-lighter:#d9e8f6,$theme-color-primary-light:#aacdec,$theme-color-primary:#0054a2,$theme-color-primary-vivid:#173bb3,$theme-color-primary-dark:#001970,$theme-color-primary-darker:#001049,$theme-color-secondary-lighter:#e8f5e8,$theme-color-secondary-light:#b4d1b8,$theme-color-secondary:#1f5634,$theme-color-secondary-vivid:#026f28,$theme-color-secondary-dark:#134626,$theme-color-secondary-darker:#073116,$theme-color-accent-cool-lighter:#e7f2f5,$theme-color-accent-cool-light:#cbdde7,$theme-color-accent-cool:#85aabe,$theme-color-accent-cool-dark:#356580,$theme-color-accent-cool-darker:#1f465c,$theme-color-accent-warm-lighter:#f3ebf2,$theme-color-accent-warm-light:#ceb4c6,$theme-color-accent-warm:#ad82a1,$theme-color-accent-warm-dark:#6D3B5E,$theme-color-accent-warm-darker:#401633)

:root{--primary-lighter:#d9e8f6;--primary-light:#aacdec;--primary:#0054a2;--primary-vivid:#173bb3;--primary-dark:#001970;--primary-darker:#001049;--secondary-lighter:#e8f5e8;--secondary-light:#b4d1b8;--secondary:#1f5634;--secondary-vivid:#026f28;--secondary-dark:#134626;--secondary-darker:#073116;--accent-cool-lighter:#e7f2f5;--accent-cool-light:#cbdde7;--accent-cool:#85aabe;--accent-cool-dark:#356580;--accent-cool-darker:#1f465c;--accent-warm-lighter:#f3ebf2;--accent-warm-light:#ceb4c6;--accent-warm:#ad82a1;--accent-warm-dark:#6D3B5E;--accent-warm-darker:#401633}

Blue with Purple Secondary

@use "uswds-core" with ($theme-color-primary-lighter:#d9e8f6,$theme-color-primary-light:#aacdec,$theme-color-primary:#0054a2,$theme-color-primary-vivid:#173bb3,$theme-color-primary-dark:#001970,$theme-color-primary-darker:#001049,$theme-color-secondary-lighter:#dac3d3,$theme-color-secondary-light:#ad82a1,$theme-color-secondary:#663355,$theme-color-secondary-vivid:#6d2c57,$theme-color-secondary-dark:#491839,$theme-color-secondary-darker:#3c062a,$theme-color-accent-cool-lighter:#dae7dc,$theme-color-accent-cool-light:#b4d1b8,$theme-color-accent-cool:#248a48,$theme-color-accent-cool-dark:#1f5634,$theme-color-accent-cool-darker:#143e24,$theme-color-accent-warm-lighter:#fdfcf0,$theme-color-accent-warm-light:#fcf9d9,$theme-color-accent-warm:#ffec87,$theme-color-accent-warm-dark:#FFD100,$theme-color-accent-warm-darker:#dfa902);

:root{--primary-lighter:#d9e8f6;--primary-light:#aacdec;--primary:#0054a2;--primary-vivid:#173bb3;--primary-dark:#001970;--primary-darker:#001049;--secondary-lighter:#dac3d3;--secondary-light:#ad82a1;--secondary:#663355;--secondary-vivid:#6d2c57;--secondary-dark:#491839;--secondary-darker:#3c062a;--accent-cool-lighter:#dae7dc;--accent-cool-light:#b4d1b8;--accent-cool:#248a48;--accent-cool-dark:#1f5634;--accent-cool-darker:#143e24;--accent-warm-lighter:#fdfcf0;--accent-warm-light:#fcf9d9;--accent-warm:#ffec87;--accent-warm-dark:#FFD100;--accent-warm-darker:#dfa902}

Dark Mode

Dark mode reduces the amount of glare that comes off of a screen. It can reduce blue light, too. For many people, including those who spend long hours staring at screens, are light sensitive (with photophobia or migraine conditions), have visual differences like low vision or color blindness, or have dyslexia, dark mode can make things easier and clearer to interact with. And, lots of people simply have a preference for dark mode regardless of difference or disability. The benefits of dark mode include:

• Reduced eye strain. Bright, white screens can be (really) harsh.
• Improved legibility and contrast. If you implement dark mode thoughtfully, your content will probably be easier for most people to read.
• Supporting user preferences or personalization. Whether a user needs or wants dark mode, theme choices make it possible for a user to express their preference.
• Improving battery life. Dark mode might offer a battery boost compared to light mode. While the gains might be slight, users - especially those who are reliant on their devices for communication - could benefit.

There are several ways that you can support dark mode in your solution. For web-based solutions, we recommend allowing user selection and supporting a user's system preference. How you facilitate dark mode access in your solution will depend on the qualities of that solution.

• Always give users a choice. Light or normal modes are, for most people, less tiring to engage with. While using a dark theme as your primary or only theme might be tempting, it is not appropriate for most State of Colorado digital tools. Let individual users opt in (with a toggle or user preferences) to dark mode.
• Don't forget about the brand. Dark mode isn't - or shouldn't be - "white on black". Regardless of the mode a user has chosen, your solution should still represent who we are.

Example using Color-scheme

The dark and light variants contained in the palettes above can be referred to in your style document. The example below was borrowed from Web.dev's Color switching with light-dark() and color-scheme.

<fieldset class="usa-fieldset"> <legend class="usa-legend usa-legend">Color Preference</legend> <div class="usa-radio"> <input class="usa-radio__input" id="light-dark" type="radio" name="color-scheme" value="light dark" checked="checked" /> <label class="usa-radio__label" for="light-dark">System</label> </div> <div class="usa-radio"> <input class="usa-radio__input" id="light" type="radio" name="color-scheme" value="dark" /> <label class="usa-radio__label" for="light">Light (Day)</label> </div> <div class="usa-radio"> <input class="usa-radio__input" id="dark" type="radio" name="color-scheme" value="dark" /> <label class="usa-radio__label" for="dark">Dark (Night)</label> </div> </fieldset>

:root { color-scheme: light dark; --primary-color: light-dark( var(--theme-color-primary-darker), var(--accent-cool-lighter) ); --primary-background: light-dark( var(--theme-color-primary-lighter), var(--theme-color-primary-darker) ); } :root { &:has(input[name="color-scheme"][value="light dark"]:checked) { color-scheme: light dark; } &:has(input[name="color-scheme"][value="light"]:checked) { color-scheme: light; } &:has(input[name="color-scheme"][value="dark"]:checked) { color-scheme: dark; } } body { color: var(--primary-color); background-color: var(--primary-background); }