Colors: Style Guide
Primary Web Color Palette
Brand colors revisited for the web with accessibility (A11y) in mind.
Web Color: Brand
UTMB Red
UTMB Red
- WEB:
- Hex #da1f12
- RGB (218,31,18)
- PRINT:
- Pantone 1788 CP
- CMYK 0 88 82 0
CSS Classes: .red .red-bg
UTMB Gray
UTMB Gray
- WEB:
- Hex #444444
- RGB (68,68,68)
- PRINT:
- Pantone Cool Gray 10 CP
- CMYK 40 30 20 66
CSS Classes: .gray .gray-bg
Gray Light
Gray Light
- WEB:
- Hex #c9cac8
- RGB (201,202,200)
- PRINT:
- Pantone Cool Gray 2 CP
- CMYK 5 3 5 11
CSS Classes: .gray-light .gray-light-bg
Web Color: Complimentary
Blue
Blue
- WEB:
- Hex #1b5196
- RGB (27,81,150)
- PRINT:
- Pantone 293 CP
- CMYK 100 69 0 4
CSS Classes: .blue .blue-bg
Blue Dark
Blue Dark
- WEB:
- Hex #1c3a56
- RGB (28,58,86)
- PRINT:
- Pantone 7463 CP
- CMYK 100 63 12 67
CSS Classes: .blue-dark .blue-dark-bg
Blue Light
Blue Light
- WEB:
- Hex #c0e1ed
- RGB (192,225,237)
- PRINT:
- Pantone 290 CP
- CMYK 23 0 1 0
CSS Classes: .blue-light .blue-light-bg
Teal
Teal
- WEB:
- Hex #457a82
- RGB (69,122,130)
- PRINT:
- Pantone 5483 CP
- CMYK 65 11 25 27
CSS Classes: .teal .teal-bg
Teal Dark
Teal Dark
- WEB:
- Hex #005760
- RGB (0,87,96)
- PRINT:
- Pantone 3165 CP
- CMYK 100 16 33 66
CSS Classes: .teal-dark .teal-dark-bg
Teal Light
Teal Light
- WEB:
- Hex #c4e1de
- RGB (196,225,222)
- PRINT:
- Pantone 317 CP
- CMYK 23 0 10 0
CSS Classes: .teal-light .teal-light-bg
Orange
Orange
- WEB:
- Hex #bf5700
- RGB (191,87,0)
- PRINT:
- Pantone 167 CP
- CMYK 5 77 100 15
CSS Classes: .orange .orange-bg
Orange Mid
Orange Mid
- WEB:
- Hex #eba149
- RGB (235,161,73)
- PRINT:
- Pantone 1495 CP
- CMYK 0 46 78 0
CSS Classes: .orange-mid .orange-mid-bg
Orange Light
Orange Light
- WEB:
- Hex #f5d7a5
- RGB (245,215,165)
- PRINT:
- Pantone 155 CP
- CMYK 0 12 34 0
CSS Classes: .orange-light .orange-light-bg
Green
Green
- WEB:
- Hex #626e25
- RGB (98,110,37)
- PRINT:
- Pantone 5753 CP
- CMYK 42 16 80 58
CSS Classes: .green .green-bg
Green Dark
Green Dark
- WEB:
- Hex #414823
- RGB (65,72,35)
- PRINT:
- Pantone 5747 CP
- CMYK 50 27 98 76
CSS Classes: .green-dark .green-dark-bg
Green Light
Green Light
- WEB:
- Hex #c2ca95
- RGB (194,202,149)
- PRINT:
- Pantone 7493 CP
- CMYK 25 4 44 3
CSS Classes: .green-light .green-light-bg
Grayscale Web Color Palette
Ready-made grayscale classes to help speed up your design process.
Web Color: Grayscale
Gray Light
- Web Color:
#c9cac8 - Text Color:
.gray-light - Background:
.gray-light-bg
Gray Dark
- Web Color:
#111111 - Text Color:
.gray-dark - Background:
.gray-dark-bg
Gray Mid
- Web Color:
#767676 - Text Color:
.gray-mid - Background:
.gray-mid-bg
Black
- Web Color:
#000000 - Text Color:
.black - Background:
.black-bg
Gray 1
- Web Color:
#111111 - Text Color:
.gray-1 - Background:
.gray-1-bg
Gray 2
- Web Color:
#222222 - Text Color:
.gray-2 - Background:
.gray-2-bg
Gray 3
- Web Color:
#333333 - Text Color:
.gray-3 - Background:
.gray-3-bg
Gray 4
- Web Color:
#444444 - Text Color:
.gray-4 - Background:
.gray-4-bg
Gray 5
- Web Color:
#555555 - Text Color:
.gray-5 - Background:
.gray-5-bg
Gray 6
- Web Color:
#666666 - Text Color:
.gray-6 - Background:
.gray-6-bg
Gray 7
- Web Color:
#777777 - Text Color:
.gray-7 - Background:
.gray-7-bg
Gray 8
- Web Color:
#888888 - Text Color:
.gray-8 - Background:
.gray-8-bg
Gray 9
- Web Color:
#999999 - Text Color:
.gray-9 - Background:
.gray-9-bg
Gray A
- Web Color:
#aaaaaa - Text Color:
.gray-a - Background:
.gray-a-bg
Gray B
- Web Color:
#bbbbbb - Text Color:
.gray-b - Background:
.gray-b-bg
Gray C
- Web Color:
#cccccc - Text Color:
.gray-c - Background:
.gray-c-bg
Gray D
- Web Color:
#dddddd - Text Color:
.gray-d - Background:
.gray-d-bg
Gray E
- Web Color:
#eeeeee - Text Color:
.gray-e - Background:
.gray-e-bg
White
- Web Color:
#ffffff - Text Color:
.white - Background:
.white-bg