Style
Colors
Color distinguishes our brand and helps us create consistent and accessible experiences across products.
Brand Colors
The American Express color palette consists of a primary palette, a neutrals palette and an accent color.
White is the dominant color in our designs, with neutrals building the foundation of components on a page. The American Express iconic blues are used for primary actions, buttons, links, and to show selection. As we strive to make all our experiences accessible, follow the text color guidance on palette swatches to ensure passing AA contrast. Please also refer to brand guidelines for more information regarding our use of color.
Primary
White
#FFFFFF
rgba(255, 255, 255, 1)
.dls-white
.dls-white-bg
.dls-white-bg-hvr
Text Color: Gray 06
Usage
Background & text
Bright Blue
#006FCF
rgba(0, 111, 207, 1)
.dls-bright-blue
.dls-bright-blue-bg
.dls-bright-blue-bg-hvr
Text Color: White
Usage
Primary actions, interactive
elements & progress
Deep Blue
#00175A
rgba(0, 23, 90, 1)
.dls-deep-blue
.dls-deep-blue-bg
.dls-deep-blue-bg-hvr
Text Color: White
Usage
Headers & selections
Neutrals
Gray 01
#F7F8F9
rgba(247, 248, 249, 1)
.dls-gray-01
.dls-gray-01-bg
.dls-gray-01-bg-hvr
Text Color: Gray 06
Usage
Background
Gray 02
#ECEDEE
rgba(236, 237, 238, 1)
.dls-gray-02
.dls-gray-02-bg
.dls-gray-02-bg-hvr
Text Color: Gray 06
Bright Blue is NOT
accessible on Gray 02
Usage
Background, borders and dividers
</span>
Gray 03
#C8C9C7
rgba(200, 201, 199, 1)
.dls-gray-03
.dls-gray-03-bg
.dls-gray-03-bg-hvr
Text Color: Gray 06
Usage
Borders for form elements
Gray 04
#8E9092
rgba(142, 144, 146, 1)
.dls-gray-04
.dls-gray-04-bg
.dls-gray-04-bg-hvr
Text Color: None
are accessible
Usage
Disabled text, do not use as background color
Gray 05
#53565A
rgba(83, 86, 90, 1)
.dls-gray-05
.dls-gray-05-bg
.dls-gray-05-bg-hvr
Text Color: White
Usage
Subtext
Gray 06
#333333
rgba(51, 51, 51, 1)
.dls-gray-06
.dls-gray-06-bg
.dls-gray-06-bg-hvr
Text Color: White
Usage
Text
Accent
Light Blue
#66A9E2
rgba(102, 169, 226, 1)
.dls-light-blue
.dls-light-blue-bg
Text Color: Gray 06
White is NOT accessible
on Light Blue
Color Accessibility Chart
The color accessibility chart follows the Web Content Accessibility Guidelines (WCAG), which are a series of guidelines for making the web accessible. American Express requires products to follow the minimum contrast ratio of AA to be compliant with accessibility best practices. Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3.1 for large text. Large text is 150% of the user's default font size or 120% user's default font size and bold.
Use a combination of icon, color and text to convey meaning, (not just one by itself) and be consistent. Provide multiple indicators so that customers who cannot easily distinguish colors can still understand and use our products.
Acceptable text & background color combinations
These color combinations do not pass a color contrast ratio of 4.5:1 for
body text and customers may have
difficulty reading the text.
Status Colors
Status colors can be used in a variety of ways to communicate meaning to our customers. When using status colors, never use color alone to communicate, including marketing communications. Include text and/or an icon to increase accessibility. It is also important to not use too much color as it can create cognitive overload, affecting our customers’ ability to interact with our products.
Status
Success
#008767
rgba(0, 135, 103, 1)
.dls-color-success
.dls-color-success-bg
.dls-color-success-bg-hvr
.dls-green
.dls-green-bg
.dls-green-bg-hvr
Text Color: White
Attention
#FDB92D
rgba(253, 185, 45, 1)
.dls-color-attention
.dls-color-attention-bg
.dls-color-attention-bg-hvr
.dls-dark-yellow
.dls-dark-yellow-bg
.dls-dark-yellow-bg-hvr
Text Color: Gray 06
Moderate
#EA700B
rgba(234, 112, 11, 1)
.dls-color-moderate
.dls-color-moderate-bg
.dls-color-moderate-bg-hvr
.dls-orange
.dls-orange-bg
.dls-orange-bg-hvr
Text Color: Black
Warning
#B42C01
rgba(180, 44, 1, 1)
.dls-color-warning
.dls-color-warning-bg
.dls-color-warning-bg-hvr
.dls-red
.dls-red-bg
.dls-red-bg-hvr
Text Color: White
Neutral
#8E9092
rgba(142, 144, 146, 1)
.dls-color-neutral
.dls-color-neutral-bg
.dls-color-neutral-bg-hvr
Text Color: Black
Black
Black is not part of our DLS color palette and should not be used. An exception to this rule is text on status colors Moderate and Neutral to achieve accessibility compliance.
Black
- #000000
- rgba(0,0,0,1)
- .dls-black
- .dls-black-bg
- .dls-black-bg-hvr
Best Practices
Changing colors
Colors convey meaning and are not interchangeable between palettes. Primary actions are Bright Blue while status colors support messaging.
Don’t do this.
$120 in Uber Cash Credits
This button should be Bright Blue to stay consistent with the American Express Brand.
Text color contrast
See color accessibility chart above when in doubt.
Don’t do this.
Thank You.
Show your apprecaition with American Express Gift Cards or eGift Cards.
The text should be white. Bright Blue on Deep Blue does not pass color accessibility guidelines.
Black for text
Black text overstimulates the retina. Instead use Gray 06 text on a white background, so the change in brightness isn’t as drastic.
Don’t do this.
Black text on white background increases eye strain.
Data Visualization colors
Data Visualization colors are not part of the brand color palette. Only use the data visualization color palette for graphs and charts.
Teal is not part of the brand color palette.
FICO
The FICO color palette is directly connected to FICO’s own color system that helps their customers, and our customers, to identify their credit score. This is accomplished using a combination of a number and a specific color, ranging from a variety of greens for good scores to a range of oranges for less optimal scores. The FICO colors are for digital servicing matters only and may not be used in marketing communications or elsewhere throughout the product.
FICO Colors
Exceptional
#4EB748
rgba(78, 183, 72, 1)
.dls-fico-exceptional
.dls-fico-exceptional-bg
.dls-fico-exceptional-bg-hvr
Very Good
#A6CE39
rgba(166, 206, 57, 1)
.dls-fico-very-good
.dls-fico-very-good-bg
.dls-fico-very-good-bg-hvr
Good
#F2EA1B
rgba(242, 234, 27, 1)
.dls-fico-good
.dls-fico-good-bg
.dls-fico-good-bg-hvr
Fair
#F89922
rgba(248, 153, 34, 1)
.dls-fico-fair
.dls-fico-fair-bg
.dls-fico-fair-bg-hvr
Poor
#CA3928
rgba(202, 57, 40, 1)
.dls-fico-poor
.dls-fico-poor-bg
.dls-fico-poor-bg-hvr
Cobrands
Cobrand colors live within our Loyalty components and leverage brand colors from a specific Cobrand or Rewards program. Visit Buttons to see how Cobrand colors are used for that component.
Cobrand Colors
Amazon
#FF8F00
rgba(255, 143, 0, 1)
.dls-cobrand-amazon
.dls-cobrand-amazon-bg
.dls-cobrand-amazon-bg-hvr
Amex Offers Dark Blue
#006592
rgba(0, 101, 146, 1)
.dls-offers-dark-blue
.dls-offers-dark-blue-bg
.dls-offers-dark-blue-bg-hvr
Amex Offers Bright Blue
#009BBB
rgba(0, 155, 187, 1)
.dls-offers-bright-blue
.dls-offers-bright-blue-bg
.dls-offers-bright-blue-bg-hvr
Amex Offers Yellow
#F0D041
rgba(240, 208, 65, 1)
.dls-offers-yellow
.dls-offers-yellow-bg
.dls-offers-yellow-bg-hvr
Blue Sky
#1790C5
rgba(23, 144, 197, 1)
.dls-cobrand-bluesky
.dls-cobrand-bluesky-bg
.dls-cobrand-bluesky-bg-hvr
Charles Schwab Blue
#00A3E0
rgba(0, 163, 224, 1)
.dls-cobrand-schwab
.dls-cobrand-schwab-bg
.dls-cobrand-schwab-bg-hvr
Delta Blue
#003366
rgba(0, 51, 102, 1)
.dls-cobrand-delta
.dls-cobrand-delta-bg
.dls-cobrand-delta-bg-hvr
Hilton Blue
#104C97
rgba(16, 76, 151, 1)
.dls-cobrand-hilton
.dls-cobrand-hilton-bg
.dls-cobrand-hilton-bg-hvr
Lowes Blue
#004890
rgba(0, 72, 144, 1)
.dls-cobrand-lowes
.dls-cobrand-lowes-bg
.dls-cobrand-lowes-bg-hvr
Plenti Purple
#273691
rgba(39, 54, 145, 1)
.dls-cobrand-plenti
.dls-cobrand-plenti-bg
.dls-cobrand-plenti-bg-hvr
Plum Purple
#5A1326
rgba(90, 19, 38, 1)
.dls-cobrand-plum
.dls-cobrand-plum-bg
.dls-cobrand-plum-bg-hvr
Marriott Bonvoy
#FF9662
rgba(225, 150, 98, 1)
.dls-cobrand-bonvoy
.dls-cobrand-bonvoy-bg
.dls-cobrand-bonvoy-bg-hvr
Default
#43A34C
rgba(67, 163, 76, 1)
.dls-cobrand-default
.dls-cobrand-default-bg
.dls-cobrand-default-bg-hvr