The North Face color palette
FashionThe North Face brand color identity is defined by a bold black primary, complemented by crisp white and utilitarian grays, reflecting its outdoor and performance heritage. The palette is minimal, functional, and instantly recognizable across products and digital platforms.
thenorthface.comThe North Face colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- TNF BlackPrimary0, 0, 0
- TNF WhiteSecondary255, 255, 255
- TNF RedAccent227, 28, 36
Surfaces
Page, cards and dividers.- TNF Light GrayBackground247, 247, 247
- TNF Surface GraySurface229, 229, 229
- TNF Border GrayBorder196, 196, 196
Text
Three tiers of copy.- TNF Black TextText0, 0, 0
- TNF Dark Gray TextSecondary text34, 34, 34
- TNF Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- TNF Success GreenSuccess58, 125, 28
- TNF Warning OrangeWarning245, 166, 35
- TNF Error RedError227, 28, 36
- TNF Info BlueInfo0, 114, 206
Use The North Face's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
the-north-face-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E31C24;
--accent: #E31C24;
--border: #C4C4C4;
--primary: #000000;
--success: #3A7D1C;
--surface: #E5E5E5;
--warning: #F5A623;
--secondary: #FFFFFF;
--text-muted: #757575;
--background: #F7F7F7;
--text-primary: #000000;
--text-secondary: #222222;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.6: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
14.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.7:1
Pass
The North Face gray and neutral colors
The quiet part of the The North Face palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- TNF Light GrayBackground
- HEX
- RGB
- HSL
- TNF Surface GraySurface
- HEX
- RGB
- HSL
- TNF Border GrayBorder
- HEX
- RGB
- HSL
- TNF Black TextText
- HEX
- RGB
- HSL
- TNF Dark Gray TextSecondary text
- HEX
- RGB
- HSL
- TNF Muted GrayMuted text
- HEX
- RGB
- HSL
About The North Face's colors
The North Face color system is rooted in strong contrasts and minimalism, using black, white, and red for maximum clarity and impact. The palette supports both high visibility and timeless style.
Primary black and white create strong visual contrast.
Red accent draws attention to key elements and branding.
Grays provide neutral backgrounds and structure.
Psychology
Black conveys durability, authority, and reliability, aligning with the brand’s outdoor performance ethos. Red is used sparingly for energy and recognition, while grays and white keep the look clean and functional.
Evolution
The North Face palette has remained consistent, with black and red as core identifiers since the brand’s inception. Minor adjustments to gray tones have been made for digital clarity, but the primary colors are unchanged.
Where The North Face uses each color
- Primary
TNF Black is used for the logo, navigation bars, and primary text.
- Secondary
TNF White appears as backgrounds, product packaging, and secondary text.
- Accent
TNF Red is reserved for the logo mark, call-to-action buttons, and select product details.
- Backgrounds
TNF Light Gray and Surface Gray are used for website backgrounds and UI surfaces.
- Text
TNF Black Text and Dark Gray Text are used for primary and secondary content, while Muted Gray is for less prominent information.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for status messages and alerts in digital interfaces.
The North Face color questions
Hex codes, RGB values, neutrals and how to use the palette.
The North Face primary color hex code is #000000, known as TNF Black. This color is central to the brand's identity.
The RGB value for TNF Black (#000000) is (0, 0, 0). In CMYK, it is (0, 0, 0, 100).
The North Face uses several grays: TNF Light Gray (#F7F7F7), Surface Gray (#E5E5E5), Border Gray (#C4C4C4), and Muted Gray (#757575). These support the brand’s minimal and functional design.
Use TNF Black (#000000) and TNF White (#FFFFFF) for primary backgrounds and text, with TNF Red (#E31C24) as a highlight. Grays structure UI elements, while semantic colors are for status and alerts.
The secondary color is TNF White, #FFFFFF, and the accent is TNF Red, #E31C24. 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 The North Face's colors consistently when it generates UI.
Make something in the spirit of The North Face
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.