University Colors
The University's official colors are blue and white with orange as an accent color.
Below are hexidecimal equivalence for the PMS and process colors the University uses.
University Blue
#00274C
RGB: 0 / 39 / 76
University White
#FFFFFF
RGB: 255 / 255 / 255
University Orange
#E17000
RGB: 225 / 112 / 0
Note: because orange is the University's accent color, it is used only as a background color, hover states, and buttons. Avoid using it as a text color because it will not meet accessibility requirements.
Below are acceptable variations of blue, white, gray, beige and orange that campus members can use. These colors meet accessibility compliance and complements the University's offical colors.
The Blues
Use the hexidecimal color values below if you want to create new styles for your campus sites. For full ATI compliancy you must have at least a 7:1 contrast ratio. Anything higher than that is always of benefit to the end user.
Dark Blues
| Background Color | Color | Darkest Font Value | Color | Contrast Ratio | Brightest Font Value | Color | Contrast Ratio |
|---|---|---|---|---|---|---|---|
| 002B54 | C1C1C1 | 7.6:1 | FFFFFF | 13.6:1 | |||
| 00274c | B1B1B1 | 7.02:1 | FFFFFF | 15.06:1 | |||
| 003366 | C1C1C1 | 7:1 | FFFFFF | 12.6:1 | |||
| 0F3C73 | CFCFCF | 7:1 | FFFFFF | 11:1 | |||
| 113850 | D2D2D2 | 8:14 | FFFFFF | 12.31:1 | |||
| 225588 | F4F4F4 | 7:1 | FFFFFF | 7.7:1 |
Medium Blues
| Background Color | Color | Darkest Font Value | Color | Contrast Ratio | Brightest Font Value | Color | Contrast Ratio |
|---|---|---|---|---|---|---|---|
| 0057ab | FDFDFD | 7:1 | FFFFFF | 7.12:1 | |||
| 1E5793 | F9F9F9 | 7.02:1 | FFFFFF | 7.39:1 | |||
| 1D508A | EEEEEE | 7.05:1 | FFFFFF | 8.18:1 | |||
| 265990 | FCFCFC | 7.02:1 | FFFFFF | 7.21:1 |
Light Blues
| Background Color | Color | Darkest Font Value | Color | Color Contrast | Brightest Font Value | Color | Color Contrast |
|---|---|---|---|---|---|---|---|
| 22517B | ECECEC | 7.02:1 | FFFFFF | 8.3:1 | |||
| 719dcd | 000000 | 7.41:1 | 090909 | 7.02:1 | |||
| 9DBED8 | 000000 | 10.79:1 | 2D2D2D | 7.08:1 | |||
| C3DCF6 | 000000 | 14.9:1 | 434343 | 7.01:1 | |||
| E0EDF6 | 000000 | 17.6:1 | 4D4D4D | 7.09:1 |
Grays, Beiges, Whites
Use the hexidecimal color values below if you want to create new styles for your campus sites. For ATI compliancy you must have at least a 7:1 contrast ratio. Anything higher than that is always of benefit to the end user.
Off Whites/Beige
| Background Color | Color | Darkest Font Value | Color | Contrast Ratio | Brightest Font Value | Color | Contrast Ratio |
|---|---|---|---|---|---|---|---|
| E8DFC9 | 000000 | 15.8:1 | 474747 | 7:1 | |||
| DAD6CC | 000000 | 14.5:1 | 414141 | 7.03:1 | |||
| EFEEE7 | 000000 | 18.1:1 | 4F4F4F | 7.04:1 | |||
| EBEDEE | 000000 | 17.9:1 | 4E4E4E | 7.09:1 | |||
| F2F7EE | 000000 | 19.3:1 | 535353 | 7.07:1 | |||
| EFEFE3 | 000000 | 18.1:1 | 4F4F4F | 7.07:1 | |||
| EBEADA | 000000 | 17.3:1 | 4C4C4C | 7.08:1 |
Medium Grays
| Background Color | Color | Darkest Font Value | Color | Contrast Ratio | Brightest Font Value | Color | Contrast Ratio |
|---|---|---|---|---|---|---|---|
| 565656 | FAFAFA | 7.03:1 | FFFFFF | 7.34:1 | |||
| 959595 | 000000 | 7.01:1 | 000000 | 7.01:1 | |||
| B3B3B3 | 000000 | 10.02:1 | 282828 | 7.03:1 | |||
| C2C2C2 | 000000 | 11.79:1 | 333333 | 7.09:1 |
Light Grays
| Background Color | Color | Darkest Font Value | Color | Contrast Ratio | Brightest Font Value | Color | Contrast Ratio |
|---|---|---|---|---|---|---|---|
| D0D0D0 | 000000 | 13.62:1 | 3C3C3C | 7.15:1 | |||
| E0E0E0 | 000000 | 15.91:1 | 474747 | 7.04:1 | |||
| EFEFEF | 000000 | 18.26:1 | 505050 | 7.01:1 | |||
| F7F7F7 | 000000 | 19.6:1 | 545454 | 7.07:1 | |||
| FFFFFF | 000000 | 21:1 | 595959 | 7:1 |
The Oranges
Pay particular attention to how you use orange on your pages. As a good rule of thumb, use it as an accent to the overall page and not as a major element or center piece. Use the hexidecimal color values below if you want to create new styles for your campus sites. For ATI compliancy you must have at least a 7:1 contrast ratio. Anything higher than that is always of benefit to the end user.
| Background Color | Color | Darkest Font Value | Color | Contrast Ratio | Brightest Font Value | Color | Contrast Ratio |
|---|---|---|---|---|---|---|---|
| E17000 * | 000000 | 6.52:1 | FFFFFF | 3.22:1 | |||
| EF7025 | 000000 | 7.01:1 | 000000 | 7.01:1 | |||
| FF8001 | 000000 | 8.34:1 | 181818 | 7.05:1 | |||
| FF6600 | 000000 | 7.15:1 | 030303 | 7.02:1 | |||
| FF7920 | 000000 | 8.01:1 | 141414 | 7.02:1 | |||
| F58220 | 000000 | 8.1:1 | 151515 | 7.04:1 |
* This is the Campus orange color and it demonstrates that it cannot be used for text content. There is no accessible color, dark or light, that will meet minimum standards to use it.
The nine
On Campus we typically build styles around nine main color choices. We do this for constancy and the ability to mix and match different formats while keeping similar styles working well together. This chart is for anyone who is using one of these and needs to tweak their styles to match color codes.
| Background Color | Color | Darkest Font Value | Color | Contrast Ratio | Brightest Font Value | Color | Contrast Ratio |
|---|---|---|---|---|---|---|---|
| 00274c | B1B1B1 | 7.02:1 | FFFFFF | 15.06:1 | |||
| 0059A2 | FDFDFD | 7.00:1 | FFFFFF | 7.12:1 | |||
| 9DBED8 | 000000 | 10.79:1 | 2D2D2D | 7.08:1 | |||
| 555555 | F8F8F8 | 7.02:1 | FFFFFF | 7.46:1 | |||
| F58220 | 000000 | 8.10:1 | 151515 | 7.04:1 | |||
| DAD6CC | 000000 | 14.47:1 | 414141 | 7.03:1 | |||
| 000000 | 959595 | 7.01:1 | FFFFFF | 21.00:1 | |||
| FFFFFF | 000000 | 21.00:1 | 595959 | 7.04:1 | |||
| F4F5F5* | 000000 | 19.23:1 | 535353 | 7.04:1 | |||
| DFDDDD* | 000000 | 15.52:1 | 454545 | 7.09:1 |
* The last style we have of our nine is a gradient. These represent the brightest and darkest colors of the gradient spread.
