Color

Primary colors

Charcoal and White are the base colors used in all branded materials. The remaining oranges and purples in the primary palette are used in reinforcing elements, such as graphics and illustrations.

Color swatches are denoted with a p (for primary palette), g (for gradients), or s (for secondary palette). Refer to the color usage section for more information on when to use digital vs. print colors.

Primary color palette

SwatchHEXRGBCMYKPMS
White
#FFFFFF255, 255, 2550, 0, 0, 0White
Charcoal
#17132123, 19, 3390, 68, 41, 90433 C / 4280 U
Orange 01p
#FCA326252, 161, 330, 40, 80, 5143 C / 1365 U
Orange 02p
#FC6D26252, 109, 380, 60, 80, 5716 C / 144 U
Orange 03p
#E24329226, 67, 410, 75, 80, 107417 C / 1665 U
Purple 01p
#A989F5169, 137, 24553, 55, 0, 02655 C / 2645 CU
Purple 02p
#7759C2119, 89, 19464, 70, 0, 02665 C / 2593 U

Secondary colors

The secondary palette expands upon our oranges and purples to provide more color varieties. These additional hues can be used to highlight various elements and add visual depth where needed. This palette also introduces teal, which has a positive connotation, especially when used to reference product features. The cool grays offer neutral color options to be used for differentiating information and/or establishing hierarchy.

Secondary color palette

SwatchHEXRGBCMYKPMS
Purple 01s
#CEB3EF206, 179, 23924, 29, 0, 02635 C
Purple 02s
#5943B689, 67, 18277, 82, 0, 02097 C
Purple 03s
#2F2A6B47, 42, 10798, 98, 27, 15273 C
Purple 04s
#23215035, 33, 8085, 82, 42, 38275 C
Orange 01s
#FDF1DD253, 241, 2211, 4, 12, 07506 C
Teal 01s
#C5F4EC197, 244, 23620, 0, 11, 0317 C
Teal 02s
#6FDAC9111, 218, 20151, 0, 29, 03242 C
Teal 03s
#10B1B116, 177, 17775, 5, 35, 07710 C
Gray 01
#D1D0D3209, 208, 2118, 5, 7, 16Cool Gray 3 C / Cool Gray 2 U
Gray 02
#A2A1A6162, 161, 16619, 12, 13, 34422 C / 422 U
Gray 03
#74717A116, 113, 12230, 20, 19, 58424 C / 425 U
Gray 04
#45424D69, 66, 7741, 28, 22, 707540 C / 419 U
Gray 05
#2B283843, 40, 5694, 77, 53, 94426 C / Black 6 U

Gradients

Gradients should not be overused and should be leveraged as a key element to add additional interest, highlight, or depth. It can be used in more subtle ways, like minimal highlighting or adding shadows, or it can be used in large-scale ways when referring to the product as a whole.

To create the gradient, use the Adobe Illustrator free-form gradient tool found in the gradient panel. Smooth, natural blending is accomplished by using a graduated blend of color stops within a shape in an ordered or random sequence.

Apply the gradient using points. Use between 3-5 colors. To achieve softer colors, use the HSB palette and drop saturation of any brand color between 1-50%. The gradient sections can also be cropped to achieve a softer look.

Gradient color palette

SwatchHEXRGBCMYKPMS
Orange 01g
#FFD1BF255, 209, 1910, 20, 21, 0489 C / 489 U
Purple 01g
#CEB3EF206, 179, 23924, 29, 0, 02635 C / 2635 U
Pink 01g
#FFB9C9255, 185, 2010, 33, 10, 01767 C / 1767 U

Contrast and accessibility

Using color combinations that have sufficient contrast benefits everyone and preserves readability. A contrast ratio of 4.5:1 or higher is preferred for text and UI elements, but 3:1 can be used for larger text. Illustrations are an exception and will use a larger range of the palette, although even the key elements should be clearly defined.

Color combinations (foreground and background) shown here have sufficient contrast. Charcoal is the only color that should be used on gradients to ensure sufficient contrast over every part of the gradient.

Color accessibility enables people with visual impairments or color vision deficiencies to interact with digital experiences in the same way as their non-visually-impaired counterparts. For more information about color contrast in a digital context, view the WCAG Success Criterion 1.4.3 Contrast (Minimum) guidelines.

Color usage

Digital

Digital colors refer to colors that will be used for digital properties. For example, this webpage uses color defined by HEX codes. If you're working with any digital asset, you can input either the HEX or RGB color codes, as detailed in the primary palette. Some digital use cases include, digital ads, digital billboards, video and animation, Canva.

  • HEX: HEX codes are based on the hexadecimal system in computing. HEX and RGB codes provide the same information, but in different formats. The HEX code includes a hashtag followed by six characters.
    • Example: #FC6D26
  • RGB: RGB is an acronym for Red, Green, and Blue. All digital colors are generated using percentages of these three colors. As mentioned, RGB is interchangeable with HEX.
    • Example: rgb(255, 255, 255)

Print

Print colors refer to colors that will be used for printed assets. Generally speaking, digital screens saturate colors more deeply than printed materials do, so print-specific colors codes are used to create more visual consistency between the two formats. Some print use cases include pop up banners, swag and merchandise, stickers, billboards, and trade show booths.

  • CMYK: CMYK is an acronym for Cyan, Magenta, Yellow, and Key (black). If an asset is a 'full-color' print, then CMYK is used. CMYK is usually the default for general printing and can be found in personal and commercial printers alike.
    • Example: C:90, M:68, Y:41, K:90
  • PMS: PMS is an acronym for Pantone Matching System. Whereas CMYK colors are generated by ink values, PMS colors are pre-mixed, universal colors established by Pantone. This technique provides the most consistent color across materials. PMS is used for spot color prints (examples include embroidery and screen printing) and for more advanced print jobs to ensure quality and accuracy; vendors will usually specify when PMS is required. PMS colors have either a name or a code, which consists of a set of numbers followed by either a 'C' for coated or a 'U' for uncoated. Coated and uncoated refer to the paper; coated indicates gloss and uncoated refers to no coating/gloss (ie: matte paper).
    • Example: 433 C / 4280 U

Last updated at: