Color

Color is a very important design element in a brand system. Color works to create an emotional connection between the brand and the viewer making products more effective and memorable. Used well, color sets the desired tone and mood for a flyer, web site, or any other communication piece.

Primary Brand Color

Yodle Blue

Hex: #005a8c
RGB: 0/90/140
CMYK: 100/36/0/45
PMS: 7462

Yodle Blue is used in all instances of client-facing properties. It is often incorporated in or around the logo, and is a prominent part of Yodle's visual branding. It is applied anywhere the Yodle brand needs to be expressed.

Secondary Palette

Light Blue

Hex: #33abe2
RGB: 51/171/226
CMYK: 68/15/0/0
PMS: 298

The secondary blue is used to add a lighter face to the darker primary blue. It is used for global navigation, subhead copy, supporting imagery, etc.

Gray

Hex: #464646
RGB: 71/70/71
CMYK: 67/60/58/42
PMS: 446

Gray is mainly used for text and supporting design elements. It helps to add a sophisticated and clean tone to the palette, and to allow the brighter colors to stand out. See below for more information on proper use.

Supporting Palette

The supporting palette colors should be used sparingly. Its main use is for primary areas of action, such as CTAs, important buttons, or to highlight certain visuals.

Green

Hex: #a1b64f
RGB: 161/182/79
CMYK: 42/14/88/0
PMS: 377

Orange

Hex: #ea9543
RGB: 234/149/67
CMYK: 6/48/83/0
PMS: 157

Yellow

Hex: #e5b841
RGB: 229/184/66
CMYK: 11/27/88/0
PMS: 141

Red

Hex: #d25044
RGB: 210/80/68
CMYK: 12/83/77/2
PMS: 7619

Brand Color Distribution

Below is a general breakdown of how to balance the color palettes in marketing pieces. Always err on the side of clean, simple design, and reference when and where to use a specific color.

Application of Gray

Gray is a large part of Yodle’s visual identity. It operates as a primary text color, as a supporting color in imagery, and as a background and container color for both web and print materials.

As the brand matures, exact breakdowns of gray will be developed. Gray should be used to accent the aesthetic, not weigh it down.

Avoid Black

Black is to be avoided whenever possible. It is too dark and heavy to be a part of Yodle’s visual brand. Use #363636 instead of #000000 (100% black).