Colors - Travois

Brand Guidelines

Color Palette

Travois’ color palette is bright, joyful and energizing with a solid foundation of grays and black. Within a designed piece use only one or two primary/secondary colors at a time, paired with a gray or black. The wide array of Travois’ color palette allows room to play and for different materials to stand out. Using only one or two colors at at a time expresses joy, without it feeling chaotic or juvenile.

Color builds are provided in RGB for digital use, HEX for the web, and CMYK for print.

Primary Colors

Teal

RGB: R10 / G166 / B169
HEX: #0AA6A9
CMYK: C94 / M2 / Y0 / K34

Green

RGB: R89 / G165 / B93
HEX: #59A55D
CMYK: C46 / M0 / Y44 / K35

Yellow

RGB: R255 / G224 / B51
HEX: #FFE033
CMYK: C0 / M12 / Y80 / K0

Bright Orange

RGB: R237 / G74/ B33
HEX: #ED4A21
CMYK: C0 / M69 / Y86 / K7

Magenta

RGB: R189 / G35 / B101
HEX: #BD2365
CMYK: C0 / M81 / Y47 / K26

Purple

RGB: R70 / G22 / B61
HEX: #46163D
CMYK: C0 / M69 / Y13 / K73

Primary Grays

Gray 1

RGB: R236 / G238 / B232
HEX: #ECEEE8
CMYK: C1 / M0 / Y3 / K7

Gray 2

RGB: R223 / G224 / B213
HEX: #DFE0D5
CMYK: C0 / M0 / Y5 / K12

Gray 3

RGB: R180 / G180 / B170
HEX: #B4B4AA
CMYK: C0 / M0 / Y6 / K29

Gray 4

RGB: R113 / G113 / B111
HEX: #71716F
CMYK: C0 / M0 / Y2 / K56

Gray 5

RGB: R81 / G82 / B81
HEX: #515251
CMYK: C1 / M0 / Y1 / K68

Black

RGB: R24 / G21/ B21
HEX: #181515
CMYK: C0 / M12 / Y12 / K91

Secondary Colors

Light Teal

RGB: R107 / G212 / B214
HEX: #6BD4D6
CMYK: C50 / M1 / Y0 / K16

Medium Teal*

RGB: R6 / G120 / B122
HEX: # 06787A

* For web/digital use whenever teal is paired with white text.

Dark Teal

RGB: R0 / G92 / B98
HEX: #005C62
CMYK: C100 / M6 / Y0 / K62

Light Green

RGB: R125 / G193 / B123
HEX: #7DC17B
CMYK: C35 / M0 / Y36 / K24

Dark Green

RGB: R51 / G117 / B65
HEX: #337541
CMYK: C56 / M0 / Y44 / K54

Dark Orange

RGB: R203 / G58 / B27
HEX: #CB3A1B
CMYK: C0 / M71 / Y87 / K20

Color Pairings

Web Accessibility Color Guidelines

Ensure that there’s sufficient contrast between the foreground and background of text and graphics (such as icons). The color combinations below meet the WCAG 2.1 – level AA accessibility requirements for text and graphics, according to WebAIM Contrast Checker. If a combination isn’t listed below, it should not be used. Some colors require text size to be large* in order to be accessible.

Normal = Color combination is good for normal-sized text (anything smaller than Large). When the Normal label is missing, normal-sized text cannot be used and only large-sized text is acceptable.

Large = Color combination is good for large text (at least 24px; OR at least 18.66px + bold)

Icon = Color combination is good for graphics (good contrast is only required for graphics that provide information or context, like a search icon)