Gap color palette
FashionGap's color identity is defined by its iconic deep blue, used consistently across branding, retail, and digital interfaces. The palette is minimal, relying on navy, white, and neutral grays for a clean, timeless look.
gap.comGap colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Gap Navy BluePrimary0, 51, 102
- Gap WhiteSecondary255, 255, 255
- Gap Accent BlueAccent0, 80, 158
Surfaces
Page, cards and dividers.- Gap Light GrayBackground247, 247, 247
- Gap Surface GraySurface229, 229, 229
- Gap Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Gap CharcoalText34, 34, 34
- Gap Medium GraySecondary text102, 102, 102
- Gap Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Gap Success GreenSuccess46, 133, 64
- Gap Warning YellowWarning255, 180, 0
- Gap Error RedError215, 38, 56
- Gap Info BlueInfo34, 116, 165
Use Gap's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
gap-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2274A5;
--error: #D72638;
--accent: #00509E;
--border: #D1D1D1;
--primary: #003366;
--success: #2E8540;
--surface: #E5E5E5;
--warning: #FFB400;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Gap gray and neutral colors
The quiet part of the Gap palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Gap Light GrayBackground
- HEX
- RGB
- HSL
- Gap Surface GraySurface
- HEX
- RGB
- HSL
- Gap Border GrayBorder
- HEX
- RGB
- HSL
- Gap CharcoalText
- HEX
- RGB
- HSL
- Gap Medium GraySecondary text
- HEX
- RGB
- HSL
- Gap Muted GrayMuted text
- HEX
- RGB
- HSL
About Gap's colors
Gap's palette is built around a strong, classic navy blue, complemented by crisp whites and subtle grays. This restrained approach emphasizes clarity, trust, and timelessness.
Primary navy blue contrasts with white for high readability.
Neutral grays provide depth and separation in the UI.
Accent blue is used sparingly for highlights and calls to action.
Psychology
Navy blue conveys reliability, confidence, and a sense of heritage, aligning with Gap's brand values. The clean white and gray tones evoke simplicity and approachability.
Evolution
Gap's palette has remained largely unchanged for decades, reinforcing brand recognition. Minor adjustments to gray tones have modernized the digital experience without altering the core identity.
Where Gap uses each color
- Primary
Gap Navy Blue is used in the logo, primary navigation, and key brand elements.
- Secondary
Gap White dominates backgrounds, product imagery, and negative space.
- Accent
Gap Accent Blue appears in buttons, links, and promotional banners.
- Backgrounds
Gap Light Gray is used for page backgrounds and UI panels.
- Text
Gap Charcoal and Medium Gray are used for primary and secondary text, ensuring readability.
- Semantic
Success, warning, error, and info colors are used in forms, notifications, and system messages.
Gap color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Gap brand color is Gap Navy Blue, hex code #003366.
Gap Navy Blue (#003366) in RGB is 0, 51, 102; in CMYK it is 100, 50, 0, 60.
Gap uses a range of grays including Gap Light Gray (#F7F7F7), Surface Gray (#E5E5E5), Border Gray (#D1D1D1), and text grays like #666666 and #999999.
Use Gap Navy Blue (#003366) for branding and navigation, white and grays for backgrounds, and Accent Blue (#00509E) for calls to action. Semantic colors are reserved for alerts and status messages.
The secondary color is Gap White, #FFFFFF, and the accent is Gap Accent Blue, #00509E. Together with the primary they make up the three brand colors at the top of this page.
4 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 Gap's colors consistently when it generates UI.
Make something in the spirit of Gap
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.