Color
All colors used in the mockup are specified in the below categories. The design spec will reference these color names, rather than Hex or RGB identifiers.
USE BOOTSTRAP
WSDOT public site colors use Bootstrap's Success, Danger, and Warning colors.
Utility colors
Utility colors refer to non-brand colors that are needed in the UI to display all states and interactions. Utility colors includes all the allowable variations of gray and white as well as error and alert state colors needed for interactions, forms, and warnings.
Gray 100
Gray 80
Gray 60
PMS 433 100%
PMS 433 80%
PMS 433 60%
RGB: 29, 37, 45
RGB: 74, 81, 87
RGB: 119, 124, 129
HEX: #1d252d
HEX: #4a5157
HEX: #777c81
Gray 40
Gray 20
Gray 10
PMS 433 40%
PMS 433 20%
PMS 433 10%
RGB: 165, 168, 171
RGB: 210, 211, 213
RGB: 232, 233, 234
HEX: #a5a8ab
HEX: #d2d3d5
HEX: #e8e9ea
Gray 5
White
Success 100%
PMS 433 5%
Same as Bootstrap’s Success color
RGB: 244, 244, 255
RGB: 255, 255, 255
RGB: 40, 167, 69
HEX: #f4f4f5
HEX: #ffffff
HEX: #28a745
Error 100%
Warning 100%
Visited 100%
Same as Bootstrap’s Danger color
Same as Bootstrap’s Warning color
Same as WSDOT tolling purple color
RGB: 220, 53, 69
RGB: 255, 193, 7
RGB: 89, 49, 95
HEX: #dc3545
HEX: #ffc107
HEX: #59315F
Inspect color codes in the Brand Styles (Figma)
Brand – primary
Primary brand colors are the main colors used to represent the WSDOT brand. All the colors shown are tint variants of the primary brand color.
Primary brand 100%
Primary brand 80%
Primary brand 60%
RGB: 0, 123, 95
RGB: 51, 149, 127
RGB: 102, 176, 159
HEX: #007b5f
HEX: #33957f
HEX: #66b09f
Primary brand 40%
RGB: 153, 202, 191
HEX: #99cabf
Inspect color codes in the Brand Styles in Figma
Brand – secondary
These are the secondary brand colors used as accents throughout the designs.
Light accent 100%
Light accent softened
Dark accent 100%
RGB: 151, 215, 0
RGB: 173, 200, 109
RGB: 0, 81, 81
HEX: #97d700
HEX: #ADC86D
HEX: #005151
Inspect color codes in the Brand styles in Figma
Accessibility
It’s important that all color contrasts meet WCAG 2.1 Level AA for text, icons, indicators, and background colors.
Maintain a minimum contrast ration of 4.5:1.
Use WebAIM Contrast Checker to make sure contrast between foreground and background is accessible.
Use WebAIM Contrast Checker to make sure contrast between foreground and background is accessible.
Last updated