BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Colors

The way we use color is important. This guideline shows how we communicate and express our brand through color. Digital color application must also be contrast-compliant to meet Level AA ADA requirements. Do not build UI elements with non-branded colors.

Primary Colors

The primary color palette for MetLife consists of blue, dark blue and green. Blue is the color of the sky and sea and is often associated with depth and stability. Green, the color of life, renewal, nature, and energy, is associated with meanings of growth, harmony, safety, fertility, and environment. There are additional secondary colors that are pre-approved for use.

MetLife Blue 1
R:0 G:144 B:218
Hex: #0090da

|


#0090da

MetLife Blue 2
(for marketing tiles, buttons and text links on white)
R:0 G:122 B:188
Hex: #007abc

|


#007abc

MetLife Dark Blue
(for text links on light backgrounds)
R: 0 G: 97 B: 160
Hex: #0061a0

|


#0061a0

MetLife Green
R:164 G:206 B:78
Hex: #a4ce4e

|


#a4ce4e

Black
R:0 G:0 B:0
Hex: #000000

|


#000000

White
R:255 G:255 B:255
Hex: #ffffff

|


#ffffff

Secondary Colors

We live our lives in full color. So should our brand. The MetLife brand palette has been liberated from “insurance blue” to a range of vibrant secondary colors that represent the vibrant lives of our customers.

These are additional secondary colors that are pre-approved for use. These colors and tints should be used very sparingly for alerts, infographics or other minimal UI highlights.

Metlife Darkest Gray
(copy & icon use only)
R:51 G:51 B:51
Hex: #333333

|


#333333

MetLife Dark Gray
R:117 G:120 B:123
Hex: #75787b

|


#75787b

MetLife Medium Gray
R:167 G:168 B:170

|


#a7a8aa

MetLife Gray
R:217 G:217 B:214
Hex: #d9d9d6

|


#d9d9d6

MetLife Light Gray
R:242 G:242 B:242
Hex: #f2f2f2

|


#f2f2f2

MetLife Berry
R:219 G:10 B:91
Hex: #db0a5b

|


#db0a5b

MetLife Purple
R:95 G:37 B:159
Hex: #5f259f

|


#5f259f

MetLife Yellow
R:255 G:198 B:0
Hex: #ffc600

|


#ffc600

MetLife Teal
R:0 G:172 B:160
Hex: #00aca0

|


#00aca0

Color Proportion

Use the graph below as a guide to determine the proportion of color usage when designing. Always allow white space for balancing the page and for ease of readability.

Color Wheel

Color with White Text

All MetLife sites must meet Level AA color contrast ratios for ADA Compliance.

Black text on a white background is the primary way to ensure compliance, but when color is introduced:

  • • Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • • Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

MetLife's approved tool for checking color compliance is available for Mac and PC here:
Paciello Group Color Contrast Tool

UAT (user acceptance testing) which includes accessibility testing is strongly recommended for all MetLife sites.

Color Contrast Checker  |   Sketch Plugin

MORE ON ACCESSIBILITY

Example
Color
Contrast Ratio
Min Text Size
(Noto Sans & Georgia)
Hello

MetLife Blue 1

3.4


19px + bold
24px + reg

3.5


19px + bold
24px + reg

Hello

MetLife Blue 2
(for marketing tiles, buttons and text links on white)

4.6


14px + bold

4.7


14px + bold

Hello

MetLife Dark Blue
(for text links on light backgrounds)

6.3


14px + reg & bold

6.5


14px + reg & bold

Hello

MetLife Green

2.0


Don't Use

1.8


Don't Use

Hello

MetLife Dark Gray

4.4


19px + bold
24px + reg

4.4


19px + bold
24px + reg

Hello

MetLife Medium Gray

2.4


Don't Use

2.4


Don't Use

Hello

MetLife Gray

1.5


Don't Use

1.4


Don't Use

Hello

MetLife Light Gray

1.2


Don't Use

1.1


Don't Use

Hello

MetLife Berry

5.0


14px +, reg & bold

5.0


14px +, reg & bold

Hello

MetLife Purple

9.3


14px +, reg & bold

9.3


14px +, reg & bold

Hello

MetLife Yellow

1.6


Don't Use

1.6


Don't Use

Hello

MetLife Teal

2.8


Don't Use

2.8


Don't Use

Color with Black Text

Black text over a white background should be the primary way to ensure maximum readability. However, there are instances when white text should be used over color.

Black text on a white background is the primary way to ensure compliance, but when color is introduced:

  • • Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • • Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

MetLife's approved tool for checking color compliance is available for Mac and PC here:
Paciello Group Color Contrast Tool

UAT (user acceptance testing) which includes accessibility testing is strongly recommended for all MetLife sites.

Color Contrast Checker  |   Sketch Plugin

MORE ON ACCESSIBILITY

Example
Color
Contrast Ratio
Min Text Size
(Noto Sans & Georgia)
Hello

MetLife Blue 1

3.4


19px + bold
24px + reg

6.0


19px + bold
24px + reg

Hello

MetLife Blue 2
(for marketing tiles, buttons and text links on white)

4.6


14px + bold

4.5


14px + bold

Hello

MetLife Dark Blue
(for text links on light backgrounds)

6.3


14px + reg & bold

3.2


19px + bold
24px + reg

Hello

MetLife Green

2.0


Don't Use

11.5


14px + reg & bold

Hello

MetLife Dark Gray

4.4


19px + bold
24px + reg

4.7


14px + reg & bold

Hello

MetLife Medium Gray

2.4


Don't Use

8.8


16px +, reg & bold

Hello

MetLife Gray

1.5


Don't Use

14.8


14px + reg & bold

Hello

MetLife Light Gray

1.2


Don't Use

18.8


14px + reg & bold

Hello

MetLife Berry

5.0


14px +, reg & bold

4.2


19px + bold
24px + reg

Hello

MetLife Purple

9.3


14px +, reg & bold

2.3


Don't Use

Hello

MetLife Yellow

1.6


Don't Use

13.3


14px +, reg & bold

Hello

MetLife Teal

2.8


Don't Use

7.4


14px +, reg & bold

Download MetLife Color Swatches

  • Full Set: ZIP