American Eagle color palette
FashionAmerican Eagle's color identity is built around a deep navy blue, reflecting a classic and approachable American style. The palette is supported by crisp whites and neutral grays for a clean, modern retail experience.
ae.comAmerican Eagle colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- AE NavyPrimary20, 33, 61
- AE WhiteSecondary255, 255, 255
- AE Gold AccentAccent252, 163, 17
Surfaces
Page, cards and dividers.- AE Light GrayBackground248, 249, 250
- AE Surface GraySurface229, 229, 229
- AE Border GrayBorder209, 213, 219
Text
Three tiers of copy.- AE Navy TextText20, 33, 61
- AE Secondary GraySecondary text107, 114, 128
- AE Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- AE Success GreenSuccess25, 135, 84
- AE Warning YellowWarning255, 193, 7
- AE Error RedError220, 53, 69
- AE Info BlueInfo13, 110, 253
Use American Eagle's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
american-eagle-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0D6EFD;
--error: #DC3545;
--accent: #FCA311;
--border: #D1D5DB;
--primary: #14213D;
--success: #198754;
--surface: #E5E5E5;
--warning: #FFC107;
--secondary: #FFFFFF;
--text-muted: #9CA3AF;
--background: #F8F9FA;
--text-primary: #14213D;
--text-secondary: #6B7280;
}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.2:1
Pass
Text on surface
Needs 4.5:1 for body text
12.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
3.8:1
Fail
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
American Eagle background, border and text colors
The quiet part of the American Eagle palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- AE Light GrayBackground
- HEX
- RGB
- HSL
- AE Surface GraySurface
- HEX
- RGB
- HSL
- AE Border GrayBorder
- HEX
- RGB
- HSL
- AE Navy TextText
- HEX
- RGB
- HSL
- AE Secondary GraySecondary text
- HEX
- RGB
- HSL
- AE Muted GrayMuted text
- HEX
- RGB
- HSL
About American Eagle's colors
American Eagle’s palette is anchored by a deep navy, complemented by whites and neutrals for clarity and approachability. Accent colors are used sparingly for calls to action and highlights.
Primary navy contrasts with white for strong visual hierarchy.
Accent gold provides energy and draws attention.
Grays unify backgrounds, surfaces, and borders for a cohesive UI.
Psychology
Navy conveys trust, reliability, and timelessness, aligning with American Eagle’s classic brand image. The use of white and gray supports a fresh, inviting retail environment.
Evolution
The core navy and white palette has remained stable over time, reinforcing brand recognition. Accent and neutral tones have been refined for digital clarity and accessibility.
Where American Eagle uses each color
- Primary
AE Navy is used for the logo, navigation bar, and key headings.
- Secondary
AE White serves as the main background and for product imagery.
- Accent
AE Gold Accent highlights promotions, call-to-action buttons, and sale tags.
- Backgrounds
AE Light Gray is used for page backgrounds and section dividers.
- Text
AE Navy Text is primary for headings, while AE Secondary Gray and AE Muted Gray are used for body and muted text respectively.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators across the site.
American Eagle color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official American Eagle brand color is AE Navy, with the hex code #14213D.
AE Navy (#14213D) in RGB is (20, 33, 61). For CMYK, it is approximately (67, 46, 0, 76).
American Eagle uses AE Light Gray (#F8F9FA), AE Surface Gray (#E5E5E5), AE Border Gray (#D1D5DB), AE Secondary Gray (#6B7280), and AE Muted Gray (#9CA3AF) for backgrounds, surfaces, borders, and secondary text.
Use AE Navy (#14213D) for primary branding elements, AE White (#FFFFFF) for backgrounds, and AE Gold Accent (#FCA311) for highlights. Grays structure the UI, and semantic colors are reserved for alerts and notifications.
The secondary color is AE White, #FFFFFF, and the accent is AE Gold Accent, #FCA311. Together with the primary they make up the three brand colors at the top of this page.
3 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 Eagle's colors consistently when it generates UI.
Make something in the spirit of American Eagle
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.