Abercrombie & Fitch color palette
FashionAbercrombie & Fitch's color identity is anchored in deep, muted neutrals and sophisticated dark tones, reflecting its classic, upscale aesthetic. The palette emphasizes timelessness and subtlety, with a focus on dark charcoal and soft grays.
abercrombie.comAbercrombie & Fitch colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- A&F CharcoalPrimary34, 34, 34
- A&F Slate GraySecondary110, 110, 110
- A&F SandAccent181, 159, 123
Surfaces
Page, cards and dividers.- A&F Light GrayBackground245, 245, 245
- A&F WhiteSurface255, 255, 255
- A&F Pale GrayBorder209, 209, 209
Text
Three tiers of copy.- A&F Charcoal TextText34, 34, 34
- A&F Slate TextSecondary text110, 110, 110
- A&F Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- A&F Forest GreenSuccess75, 127, 82
- A&F SandWarning181, 159, 123
- A&F Brick RedError185, 74, 72
- A&F Slate BlueInfo58, 90, 107
Use Abercrombie & Fitch's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
abercrombie-and-fitch-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A5A6B;
--error: #B94A48;
--accent: #B59F7B;
--border: #D1D1D1;
--primary: #222222;
--success: #4B7F52;
--surface: #FFFFFF;
--warning: #B59F7B;
--secondary: #6E6E6E;
--text-muted: #A3A3A3;
--background: #F5F5F5;
--text-primary: #222222;
--text-secondary: #6E6E6E;
}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.6:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Abercrombie & Fitch gray and neutral colors
The quiet part of the Abercrombie & Fitch palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- A&F Light GrayBackground
- HEX
- RGB
- HSL
- A&F WhiteSurface
- HEX
- RGB
- HSL
- A&F Pale GrayBorder
- HEX
- RGB
- HSL
- A&F Charcoal TextText
- HEX
- RGB
- HSL
- A&F Slate TextSecondary text
- HEX
- RGB
- HSL
- A&F Muted GrayMuted text
- HEX
- RGB
- HSL
About Abercrombie & Fitch's colors
Abercrombie & Fitch uses a restrained palette of dark neutrals and muted earth tones to convey a sense of heritage and understated luxury. The color system is designed for timelessness and broad appeal.
Primary and secondary are both dark, neutral grays for cohesion.
Accent colors are muted, natural tones for subtle highlights.
Text and backgrounds maintain high contrast for readability.
Psychology
The deep charcoal and slate tones evoke sophistication, stability, and trust. Earthy accents add warmth and approachability to the brand's visual language.
Evolution
The palette has remained largely stable, with a consistent emphasis on dark neutrals since the early 2000s. Occasional updates have introduced muted accent tones, but the core colors have not changed significantly.
Where Abercrombie & Fitch uses each color
- Primary
Used for navigation bars, headers, and primary buttons.
- Secondary
Appears in secondary buttons, footers, and overlays.
- Accent
Used for call-to-action highlights and subtle UI elements.
- Backgrounds
Applied to page backgrounds and content areas for a clean, neutral base.
- Text
Primary and secondary text colors are used throughout the site for headings and body copy.
- Semantic
Success, warning, and error colors are used for notifications and status indicators.
Abercrombie & Fitch color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Abercrombie & Fitch primary brand color is A&F Charcoal, hex code #222222.
A&F Charcoal (#222222) in RGB is (34, 34, 34); in CMYK it is approximately (0, 0, 0, 87).
Abercrombie & Fitch uses A&F Slate Gray (#6E6E6E), A&F Muted Gray (#A3A3A3), and A&F Pale Gray (#D1D1D1) as its primary neutral tones.
Use A&F Charcoal (#222222) for primary navigation and text, with A&F Slate Gray (#6E6E6E) for secondary elements and A&F Sand (#B59F7B) for accents. Maintain high contrast between text and backgrounds for accessibility.
The secondary color is A&F Slate Gray, #6E6E6E, and the accent is A&F Sand, #B59F7B. 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 Abercrombie & Fitch's colors consistently when it generates UI.
Make something in the spirit of Abercrombie & Fitch
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.