American Express color palette
FinanceAmerican Express uses a distinctive blue-centric palette, anchored by its iconic Amex Blue, to convey trust, stability, and premium service. The color system features a range of blues and neutral grays for clarity and professionalism across digital and print applications.
americanexpress.comAmerican Express colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Amex BluePrimary46, 119, 188
- Amex Deep BlueSecondary0, 114, 206
- Amex Sky BlueAccent75, 180, 230
Surfaces
Page, cards and dividers.- Amex Light GrayBackground244, 247, 250
- Amex WhiteSurface255, 255, 255
- Amex Border GrayBorder209, 217, 224
Text
Three tiers of copy.- Amex CharcoalText29, 30, 33
- Amex SlateSecondary text78, 90, 101
- Amex Muted GrayMuted text123, 135, 147
Semantic
Feedback and state colors.- Amex Success GreenSuccess63, 182, 139
- Amex Warning OrangeWarning245, 166, 35
- Amex Error RedError233, 79, 60
- Amex Info BlueInfo0, 114, 206
Use American Express's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
american-express-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E94F3C;
--accent: #4BB4E6;
--border: #D1D9E0;
--primary: #2E77BC;
--success: #3FB68B;
--surface: #FFFFFF;
--warning: #F5A623;
--secondary: #0072CE;
--text-muted: #7B8793;
--background: #F4F7FA;
--text-primary: #1D1E21;
--text-secondary: #4E5A65;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.5:1
Pass
Text on surface
Needs 4.5:1 for body text
16.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.1:1
Pass
Muted text on background
Needs 3:1 for large text
3.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.7:1
Pass
American Express background, border and text colors
The quiet part of the American Express palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Amex Light GrayBackground
- HEX
- RGB
- HSL
- Amex WhiteSurface
- HEX
- RGB
- HSL
- Amex Border GrayBorder
- HEX
- RGB
- HSL
- Amex CharcoalText
- HEX
- RGB
- HSL
- Amex SlateSecondary text
- HEX
- RGB
- HSL
- Amex Muted GrayMuted text
- HEX
- RGB
- HSL
About American Express's colors
American Express’s palette is built around blue, a color associated with trust and security in finance. Neutral grays and white provide balance and clarity in digital interfaces.
Primary and secondary blues are used for brand recognition and hierarchy.
Grays and white serve as backgrounds and surfaces for readability.
Accent blue highlights interactive elements and calls to action.
Psychology
Blue communicates reliability, confidence, and professionalism, which are key values for a financial brand. The palette’s restraint reinforces a sense of stability and trustworthiness.
Evolution
The American Express palette has remained stable, with minor refinements to blue tones for digital clarity. Neutral grays have been adjusted over time to improve accessibility and contrast.
Where American Express uses each color
- Primary
Amex Blue is used in the logo, navigation bars, and key buttons.
- Secondary
Amex Deep Blue appears in backgrounds, headers, and promotional banners.
- Accent
Amex Sky Blue highlights links, icons, and active states.
- Backgrounds
Amex Light Gray and Amex White are used for page backgrounds and card surfaces.
- Text
Amex Charcoal and Amex Slate are used for primary and secondary text throughout the UI.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
American Express color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official American Express primary color is Amex Blue, hex code #2E77BC. This color is used for the logo and main brand elements.
Amex Blue (#2E77BC) is RGB(46, 119, 188) and CMYK(76, 37, 0, 26). These values ensure consistency across digital and print media.
American Express uses Amex Light Gray (#F4F7FA), Amex Border Gray (#D1D9E0), and Amex Muted Gray (#7B8793) for backgrounds, borders, and muted text. These neutrals provide clarity and support accessibility.
Use Amex Blue (#2E77BC) for primary actions and branding, with secondary and accent blues for hierarchy and emphasis. Grays and whites should be applied to backgrounds and surfaces for optimal readability.
The secondary color is Amex Deep Blue, #0072CE, and the accent is Amex Sky Blue, #4BB4E6. Together with the primary they make up the three brand colors at the top of this page.
6 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies American Express's colors consistently when it generates UI.
Make something in the spirit of American Express
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.