Web Colors
The USU template has a predefined color palette that can be accessed using CSS classes. We ask that you do not use colors outside of this prescribed color palette. Provided below are some general use guidelines when it comes to using the provided colors.
Blues
Primary
HEX: #0F2439
Blue Light
HEX: #E1EAF9
Blue
HEX: #384660
Blue Dark
HEX: #2F3A50
Blue Darker
HEX: #252F40
Neutrals
Gray
HEX: #CED4DA
Gray Dark
HEX: #838898
Gray Darker
HEX: #495057
Black Light
HEX: #343A40
Black
HEX: #1E252B
Lights
Gray
HEX: #CED4DA
Gray Light
HEX: #DEE2E6
Gray Lighter
HEX: #E9ECEF
Light
HEX: #F8F9FA
White
HEX: #FFFFFF
Accent Colors
The following background colors can have accessibility issues when combined with smaller text sizes. Please check accessibility tools when using.
Bright Light
HEX: #4494DA
Uses
Areas you want to stand out such as full width content areas, card headers, and buttons.
Bright Light Text
HEX: #4494DA
Uses
Often used as an alternate sub-heading color to help differentiate lower level headings or complex heading structures.
Brick
HEX: #C44E28
Uses
Not often used as a background color swatch. Use sparingly. Can be used as a "summer" color designation.
Brick Text
HEX: #C44E28
Uses
Often used as a subheading modifier to help differentiate mutliple heading levels in close proximity.
Green Light
HEX: #7D9C3A
Uses
Not often used as a background color swatch. Use sparingly. Can be used as a "spring" color designation or with call to action buttons.
Green Light Text
HEX: #7D9C3A
Uses
Not often used for stand-alone text.
Grape
HEX: #543035
Uses
Not often used as a background color swatch. Use sparingly. Can be used as a "fall" color designation.
Grape Text
HEX: #543035
Uses
This color is reserved for only the most critical warnings or that a requested operation failed.
Contextual Colors
Success
HEX: #588038
Uses
This color is reserved for when you want to give feedback to the user that an operation completed successfully.
Success Text
HEX: #588038
Uses
This color is reserved for when you want to give feedback to the user that an operation completed successfully.
Info
HEX: #226BAA
Uses
This color is used to bring important information to the attention of the user.
Info Text
HEX: #226BAA
Uses
This color is used to bring important information to the attention of the user.
Warning
HEX: #AE6002
Uses
This color is reserved for when you want to convey critical information to the user that may have a detrimental impact.
Warning Text
HEX: #AE6002
Uses
This color is reserved for when you want to convey critical information to the user that may have a detrimental impact.
Danger
HEX: #A6260D
Uses
This color is reserved for only the most critical warnings or that a requested operation failed.
Danger Text
HEX: #A6260D
Uses
This color is reserved for only the most critical warnings or that a requested operation failed.