Hollister color palette
FashionHollister's color identity is rooted in deep, rich tones inspired by California beaches and vintage Americana. The palette features a signature deep burgundy, complemented by soft neutrals and dark navy accents.
hollisterco.comHollister colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hollister BurgundyPrimary67, 42, 42
- Hollister NavySecondary34, 49, 63
- Hollister SandAccent166, 124, 82
Surfaces
Page, cards and dividers.- Hollister Off-WhiteBackground248, 247, 244
- Hollister WhiteSurface255, 255, 255
- Hollister Light GrayBorder209, 207, 203
Text
Three tiers of copy.- Hollister CharcoalText34, 34, 34
- Hollister Medium GraySecondary text107, 107, 107
- Hollister Muted GrayMuted text167, 167, 167
Semantic
Feedback and state colors.- Hollister OliveSuccess92, 138, 100
- Hollister WheatWarning230, 184, 125
- Hollister Deep RedError185, 74, 72
- Hollister Slate BlueInfo74, 106, 138
Use Hollister's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hollister-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4A6A8A;
--error: #B94A48;
--accent: #A67C52;
--border: #D1CFCB;
--primary: #432A2A;
--success: #5C8A64;
--surface: #FFFFFF;
--warning: #E6B87D;
--secondary: #22313F;
--text-muted: #A7A7A7;
--background: #F8F7F4;
--text-primary: #222222;
--text-secondary: #6B6B6B;
}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
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Hollister background, border and text colors
The quiet part of the Hollister palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hollister Off-WhiteBackground
- HEX
- RGB
- HSL
- Hollister WhiteSurface
- HEX
- RGB
- HSL
- Hollister Light GrayBorder
- HEX
- RGB
- HSL
- Hollister CharcoalText
- HEX
- RGB
- HSL
- Hollister Medium GraySecondary text
- HEX
- RGB
- HSL
- Hollister Muted GrayMuted text
- HEX
- RGB
- HSL
About Hollister's colors
Hollister's palette is grounded in earthy, natural tones that evoke a relaxed, coastal lifestyle. The deep burgundy and navy provide a sense of heritage and stability, while sandy and off-white neutrals add warmth.
Primary and secondary colors are complementary and used for brand recognition.
Accent and neutral tones balance the palette for backgrounds and UI elements.
Text colors are chosen for high readability against light and dark surfaces.
Psychology
The deep burgundy conveys warmth, tradition, and a sense of comfort, while navy adds trust and dependability. Neutrals and sand tones evoke approachability and a laid-back atmosphere.
Evolution
Hollister's color palette has remained largely consistent, emphasizing its signature burgundy and navy since its inception. Minor adjustments have been made to neutrals and accents for modern digital use.
Where Hollister uses each color
- Primary
Used in the Hollister logo, navigation bar, and key promotional banners.
- Secondary
Appears in headers, footers, and as a background for call-to-action areas.
- Accent
Used for buttons, highlights, and product tags.
- Backgrounds
Off-white and white are used for main page backgrounds and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the site.
- Semantic
Olive, wheat, deep red, and slate blue are used for status messages, alerts, and notifications.
Hollister color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hollister primary brand color is Hollister Burgundy, hex code #432A2A.
Hollister Burgundy (#432A2A) is RGB(67, 42, 42). For CMYK, it is approximately 0, 37, 37, 74.
Hollister uses Off-White (#F8F7F4), Light Gray (#D1CFCB), Medium Gray (#6B6B6B), and Muted Gray (#A7A7A7) for backgrounds, borders, and muted text.
Use Hollister Burgundy (#432A2A) for primary branding elements, navy (#22313F) for secondary emphasis, and sand (#A67C52) as an accent. Neutrals and grays provide balance and ensure readability in UI layouts.
The secondary color is Hollister Navy, #22313F, and the accent is Hollister Sand, #A67C52. 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 Hollister's colors consistently when it generates UI.
Make something in the spirit of Hollister
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.