Colors: Style Guide

Primary Web Color Palette

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

Web Color: Brand

Brand Palette

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

Brand Palette

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

UTMB Gray Best Practices
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

Gray Light Best Practices

Web Color: Complimentary

Brand Palette

Blue
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

Brand Palette

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

Blue Light Best Practices

Brand Palette

Teal
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

Brand Palette

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

Teal Light Best Practices

Brand Palette

Orange
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

Brand Palette

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

Orange Light Best Practices

Brand Palette

Green
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

Brand Palette

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

Green Light Best Practices

Grayscale Web Color Palette

Ready-made grayscale classes to help speed up your design process.

Web Color: Grayscale

Web Style Guide: Color

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

On this page: