Color

Sub Menu

STANDARDS

Color

Collage of color swatches.

Overview

Color is often the first thing a user notices when interacting with the brand, especially in digital spaces. Our colors are bold, bright, and expressive—making MetLife instantly recognizable.

Standards

Guidance

Accessibility

Localization

Standards

Primary

Our primary color palette features calm and refreshing blues and greens that reflect expertise and trustworthiness. All digital applications should start from a base of white, with blue as the primary color and green used slightly less.

Spectrum of MetLife primary colors.
Phone screen showing use of color.
Phone screen showing use of color.
Phone screen showing use of color.
of
Error Message

Neutrals

Neutrals are how we always start a layout (almost always on white). Use neutrals as a canvas, and to ground all elements in a clear and legible way.

Spectrum of MetLife neutral colors.
Phone screen showing use of neutral color.
Phone screen showing use of neutral color.
Phone screen showing use of neutral color.
of
Error Message

Secondary

Secondary colors help bring vitality to our brand. While generally used sparingly in the global brand, some localized markets amplify these colors in digital.

See Localization Guide

Spectrum of MetLife secondary colors.
Phone screen showing use of secondary color.
Phone screen showing use of secondary color.
Phone screen showing use of secondary color.
of
Error Message

Gradients

Gradients are used to add vitality and energy to a composition. They are most suited for use in marketing and key moments within an experience.

Gradient spectrum
Phone screen showing use of gradient.
Phone screen showing use of gradient.
Phone screen showing use of gradient.
of
Error Message

Swatches

White
#FFFFFF
Blue 1
#0090DA
Blue 2
#007ABC
Dark Blue
#0061A0
Green
#A4CE4E
Light Gray
#F2F2F2
Gray
#D9D9D6
Medium Gray
#A7A8AA
Dark Gray
#6E6E6E
Darkest Gray
#333333
Black
#000000
Berry
#DB0A5B
Purple
#5F259F
Yellow
#FFC600
Teal
#00ACA0
Red
#D42123

Guidance

Color breathes life into the digital experiences we design and helps create an association with the brand. Here are a few things to keep in mind as you work with color.

Do

Start with White and Darkest Gray.

  • As a general rule, layouts should start from a base of white space to add modernity and freshness.
  • All text should be Darkest Gray, never Black.
Do

Use MetLife Blue and Green in the highest proportions.

  • Use MetLife Blue 1, Dark Blue, and Green on illustration, graphics and backgrounds.
  • Use MetLife Blue 2 on actionable items.
  • Try to maintain a 70% Blue, and 30% Green relationship between the two main colors.
Do

Accent with secondary colors.

  • Use MetLife Teal, Purple, and Yellow (sparingly) to accent our core color palette. 
Collage of screens showing use of color in digital designs.
Don't
  • Make secondary colors the hero.
A Facebook post that uses secondary color prominently.
Don't
  • Make text Green, or Blue, or Black. Always use Darkest Gray.
Phone screen showing green text on white background.

Marketing

Whether you’re making a digital ad, posting new content on social, or sending a welcome email, you can use our primary color palette to help evoke emotion and build a deeper relationship with our customers. 

Do

Be bold with Blue 1.

  • Use MetLife Blue 1 to be bold and introduce the brand in social media.
Do

Use gradients to represent progress and add a sense of motion.

  • Combining subtle gradients with photography is a great way to create modern visuals and harmony between our colors.
Do

Use Black to signal expertise.

  • Use Black as an expertise signal, in data visualization or cards for agents.
Phone screens showing use of color in marketing designs.
Don't
  • Overuse color. Never use more than three colors in one screen moment.
Example design using too much color.
Don't
  • Don’t add gradients to typography.
Example design using gradient in typography
Don't
  • Use type smaller than 18 pt when combining Blue 1 with white type.
Phone screen with white type on blue background.

User Interface

Color can be functional, too. Here are some tips for using primary and secondary colors to visually guide our users through digital experiences.

Do

Show success with Metlife

  • Use MetLife Green on select functional moments as well as notifications, validations, progress and data viz.
Do

Use secondary colors for alerts.

  • Use MetLife Berry on alert notifications.
  • Use MetLife Red on errors or uncompleted tasks.
Do

Use gradients as subtle accents that nod to the brand.

  • Use gradients to show progress on bars.
  • Use gradients on strokes in secondary CTAs.
Phone screens showing use of color in UI moments.
Don't
  • Don’t use Blue for active states or noninteractive type.
Phone screen showing blue type on white background.
Don't
  • Don’t use secondary colors on actionable items.
Phone screen showing buttons in a secondary color.

Accessibility

MetLife is committed to designing and developing digital experiences that all our customers are able to use. We stick to contrast ratios that meet WCAG 2.1 (Level AA) standards.

Do

Design using color combinations that meet accessibility standards for contrast.

  • Use our guide below to help with decisions regarding color combinations with typography. We follow the latest standards from the WCAG (Web Content Accessibility Guidelines).
  • A contrast ratio of 4.5:1 for the normal or bold text below 18 px is required. 
  • A contrast ratio of 3:1 for large text above 18 px and bolded, or 24px or larger for non-bolded text.
Do
  • Use these color combinations.
Text and background color combinations.
Don't
  • Use these color combinations.
Text and background color combinations.

Localization

Color is treated a bit differently in markets that have received a brand localization. Refer to the following pages for color guidance by country.

COLOR
Japan
COLOR
South Korea
COLOR
Mexico