Colors
Last updated: September 8, 2015 at 17:30 pm

Definitions of approved colors for use on the web. Includes names, hex codes, and ADA compliance notes.


Visual example of the element:


What problem does this element or pattern solve?
A consistent color palette is important for branding, information hierarchy, and controlling eye direction. When designing pages, use only these approved colors and gradients.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

http://www.yourcompany.com



Detailed specifications

Specifications To Consider

• Provide both RGB formulas and Hex codes.

• Give the colors non-numerical names, such as “Charcoal” and “CompanyName Blue.” That will allow owners to reference the colors in other sections of the framework without worrying about the inevitable typos that result when re-entering Hex or RGB codes.

• If a color is restricted to certain uses (buttons only, backgrounds only, errors only, etc.) be sure to tell your users.

• Include a “note” column near each color to address accessibility. Let your users know if a particular color passes WCAG accessibility tests (AA and AAA) when used in common combinations.

• If you use gradients, clearly define them here. If gradients are not permitted, state this as well.

• You may consider adding a “color balance” guide, to ensure that various pages do not use one color more prominently than another.

Sample Content

Brand Colors

Color Name HEX Notes
Orange 1 #f26a25 NA
Orange 2 #cb4b27 NA
Charcoal #333333 NA
Dark Gray #6b6b6b Compliant AAA – (f5, fff)
Medium Gray #999999 Non-Compliant – (f5, fff) – 2.5, 2.6
Light Gray #c7c7c7 NA
Pale Gray #f5f5f5 NA

 

Link Colors

Color Name HEX Notes
Text Link – Default #cb4b27 Partially Compliant on #FFF background. Passes WCAG AA; Fails
WCAG AAA. Passes both if used above 14px.
TextLink – Hover #f26a25 Non-compliant
Text Link – Visited Blue #76abd6 Text Link Visited, AA – (f5, fff) – 3.3, 3.1

 

Background and Background Rollover State Colors

Color State HEX Notes
Default White Background #ffffff NA
Hover background #d8edff NA

 

Error and Alert Box and Text Colors

These colors may only be used in Error and Alert messages. They are not approved for any other purpose.

Color Name HEX Notes
Alert Red #b80000 Compliant AAA – (f5,fff)
Alert Red Background #f5d7d7 NA

 

Do Not Use nor Create Gradients

Gradients are reserved for BUTTON USE ONLY. As a result, they are not defined here. Do not use, nor create, any gradients for use on the site outside of pre-approved button styles.

 

 



Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
color design, color palette, color scheme, coloration, colour design, colours, colour palette, colour scheme, colouration, palette, spectrum, swatches
Related elements within this Style Framework:


Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply