Patagonia color palette
FashionPatagonia's color identity is rooted in the natural landscapes it champions, featuring deep blues and purples inspired by the mountains and sky. The palette is bold yet grounded, reflecting the brand's outdoor heritage.
patagonia.comPatagonia colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Patagonia BluePrimary0, 81, 140
- Patagonia PurpleSecondary108, 46, 83
- Patagonia GoldAccent245, 166, 35
Surfaces
Page, cards and dividers.- Patagonia WhiteBackground255, 255, 255
- Patagonia Light GraySurface246, 246, 246
- Patagonia Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Patagonia CharcoalText34, 34, 34
- Patagonia Medium GraySecondary text77, 77, 77
- Patagonia Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Patagonia GreenSuccess75, 175, 80
- Patagonia GoldWarning245, 166, 35
- Patagonia RedError208, 2, 27
- Patagonia BlueInfo0, 81, 140
Use Patagonia's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
patagonia-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00518C;
--error: #D0021B;
--accent: #F5A623;
--border: #E0E0E0;
--primary: #00518C;
--success: #4BAF50;
--surface: #F6F6F6;
--warning: #F5A623;
--secondary: #6C2E53;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #4D4D4D;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.8:1
Pass
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.3:1
Pass
Patagonia gray and neutral colors
The quiet part of the Patagonia palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Patagonia WhiteBackground
- HEX
- RGB
- HSL
- Patagonia Light GraySurface
- HEX
- RGB
- HSL
- Patagonia Border GrayBorder
- HEX
- RGB
- HSL
- Patagonia CharcoalText
- HEX
- RGB
- HSL
- Patagonia Medium GraySecondary text
- HEX
- RGB
- HSL
- Patagonia Muted GrayMuted text
- HEX
- RGB
- HSL
About Patagonia's colors
Patagonia's palette is inspired by the natural world, particularly the mountains at sunset, with deep blues, purples, and vibrant accents. The colors are chosen to evoke trust, adventure, and environmental stewardship.
Primary blue and secondary purple are analogous, creating harmony.
Accent gold provides complementary contrast.
Neutrals ground the palette for clarity and readability.
Psychology
The deep blue conveys reliability and professionalism, while the purple adds a sense of creativity and uniqueness. The gold accent brings warmth and energy, reflecting the brand's passion for the outdoors.
Evolution
Patagonia's color palette has remained consistent, rooted in its original logo and outdoor inspiration. Minor adjustments have been made for digital clarity, but the core colors are stable.
Where Patagonia uses each color
- Primary
Used for the logo, main navigation highlights, and key calls to action.
- Secondary
Appears in backgrounds, secondary buttons, and graphic elements.
- Accent
Used for highlights, sale tags, and important notifications.
- Backgrounds
White and light gray are used for page backgrounds and product displays.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the site.
- Semantic
Green, gold, and red are used for success, warning, and error states in forms and notifications.
Patagonia color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Patagonia primary brand color is Patagonia Blue, hex code #00518C.
Patagonia Blue (#00518C) in RGB is 0, 81, 140. In CMYK it is 100, 42, 0, 45.
Patagonia uses several neutral tones, including Patagonia Light Gray (#F6F6F6), Border Gray (#E0E0E0), and Charcoal (#222222) for UI elements and text.
Use Patagonia Blue (#00518C) for primary actions and branding, with secondary and accent colors for highlights and notifications. Neutrals ensure readability and support the overall visual hierarchy.
The secondary color is Patagonia Purple, #6C2E53, and the accent is Patagonia Gold, #F5A623. 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 Patagonia's colors consistently when it generates UI.
Make something in the spirit of Patagonia
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.