Colors: Style Guide

Primary Web Color Palette

Brand colors revisited for the web with accessibility (A11y) in mind.

Web Color: Brand

UTMB Red

WEB:
Hex #da1f12
RGB (218,31,18)

PRINT:
Pantone 1788 CP
CMYK 0 88 82 0

CSS Classes: .red .red-bg

UTMB Red Best Practices

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

UTMB Gray Best Practices

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

Gray Light Best Practices

Web Color: Complimentary

Blue

WEB:
Hex #1b5196
RGB (27,81,150)

PRINT:
Pantone 293 CP
CMYK 100 69 0 4

CSS Classes: .blue .blue-bg

Blue Best Practices

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 Dark Best Practices

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

Blue Light Best Practices

Teal

WEB:
Hex #457a82
RGB (69,122,130)

PRINT:
Pantone 5483 CP
CMYK 65 11 25 27

CSS Classes: .teal .teal-bg

Teal Best Practices

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 Dark Best Practices

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

Teal Light Best Practices

Orange

WEB:
Hex #bf5700
RGB (191,87,0)

PRINT:
Pantone 167 CP
CMYK 5 77 100 15

CSS Classes: .orange .orange-bg

Orange Best Practices

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 Mid Best Practices

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

Orange Light Best Practices

Green

WEB:
Hex #626e25
RGB (98,110,37)

PRINT:
Pantone 5753 CP
CMYK 42 16 80 58

CSS Classes: .green .green-bg

Green Best Practices

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 Dark Best Practices

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

Green Light Best Practices

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