Primary Colors
Component status:Ready
Our primary palette consists of scarlet (red), gray and white.
Our primary colors — scarlet and gray — have been Ohio State’s official colors since the university’s earliest days. Consistent and appropriate use of our primary identity colors is one of the most effective ways our communications create a recognizable Ohio State look.
Information.
Primary
Name | Hex | Sass Variable | Swatch |
---|---|---|---|
Scarlet (PMS 200) | #ba0c2f | $scarlet | |
Gray (PMS 429) | #a7b1b7 | $gray | |
White | #ffffff | $white |
Scarlet Shades
Name | Hex | Sass Variable | Swatch |
---|---|---|---|
Scarlet Dark 40 | #70071c | $scarlet-dark-40 | |
Scarlet Dark 60 | #4a0513 | $scarlet-dark-60 |
Gray Tints
Name | Hex | Sass Variable | Swatch |
---|---|---|---|
Gray Light 20 | #bfc6cb | $gray-light-20 | |
Gray Light 40 | #cfd4d8 | $gray-light-40 | |
Gray Light 60 | #dfe3e5 | $gray-light-60 | |
Gray Light 80 | #eff1f2 | $gray-light-80 | |
Gray Light 90 | #f6f7f8 | $gray-light-90 |
Gray Shades
Name | Hex | Sass Variable | Swatch |
---|---|---|---|
Gray Dark 20 | #868e92 | $gray-dark-20 | |
Gray Dark 40 | #646a6e | $gray-dark-40 | |
Gray Dark 60 | #3f4443 | $gray-dark-60 | |
Gray Dark 80 | #212325 | $gray-dark-80 |
Usage
Dos
- Reserve scarlet for calls-to-action, whenever possible
- Use white or gray tints as background colors
- Use gray shades for legibility of text and to meet accessibility contrast requirements
Don’ts
- Don’t use tints of scarlet (colors lighter than scarlet)
- Don’t use accent colors for decorative purposes
- Don’t use accent colors as a predominant color or primary way to identify a unit
Accessibility
- Color contrast WGAC 2.1 AA Guidelines
- WebAIM color contrast resources
- Color Contrast Checker
- How to use color
References
- Ohio State brand guidelines: Color