Birkenstock color palette
FashionBirkenstock's color identity is defined by a deep, classic blue paired with understated neutrals, reflecting the brand's heritage and functional aesthetic. The palette is minimalist, prioritizing clarity and timelessness.
birkenstock.comBirkenstock colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Birkenstock BluePrimary0, 49, 92
- Birkenstock WhiteSecondary255, 255, 255
- Birkenstock SandAccent183, 161, 106
Surfaces
Page, cards and dividers.- Birkenstock Light GrayBackground246, 246, 246
- Birkenstock Surface GraySurface229, 229, 229
- Birkenstock Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Birkenstock CharcoalText34, 34, 34
- Birkenstock Medium GraySecondary text102, 102, 102
- Birkenstock Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Birkenstock OliveSuccess74, 125, 58
- Birkenstock MustardWarning217, 164, 65
- Birkenstock BrickError176, 58, 46
- Birkenstock Info BlueInfo25, 118, 210
Use Birkenstock's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
birkenstock-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #B03A2E;
--accent: #B7A16A;
--border: #D1D1D1;
--primary: #00315C;
--success: #4A7D3A;
--surface: #E5E5E5;
--warning: #D9A441;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F6F6F6;
--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.7: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.3: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.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Birkenstock gray and neutral colors
The quiet part of the Birkenstock palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Birkenstock Light GrayBackground
- HEX
- RGB
- HSL
- Birkenstock Surface GraySurface
- HEX
- RGB
- HSL
- Birkenstock Border GrayBorder
- HEX
- RGB
- HSL
- Birkenstock CharcoalText
- HEX
- RGB
- HSL
- Birkenstock Medium GraySecondary text
- HEX
- RGB
- HSL
- Birkenstock Muted GrayMuted text
- HEX
- RGB
- HSL
About Birkenstock's colors
Birkenstock's palette is rooted in a deep blue and a range of soft neutrals, emphasizing reliability and simplicity. The colors are chosen to convey trust, tradition, and a natural sensibility.
Primary blue contrasts with white for clarity.
Neutrals support product imagery and content.
Accent sand adds warmth and ties to natural materials.
Psychology
The deep blue evokes trust, stability, and heritage, aligning with Birkenstock's reputation for quality. Neutral tones create a calm, approachable environment that highlights the product.
Evolution
Birkenstock's palette has remained largely consistent, with blue as the anchor color. Minor adjustments to neutral tones have modernized the UI without altering the core identity.
Where Birkenstock uses each color
- Primary
Birkenstock Blue is used in the logo, primary navigation, and key call-to-action buttons.
- Secondary
Birkenstock White is used for backgrounds, product pages, and clean content areas.
- Accent
Birkenstock Sand appears in highlights, product tags, and subtle UI elements.
- Backgrounds
Birkenstock Light Gray is the default background for most pages and overlays.
- Text
Birkenstock Charcoal and Medium Gray are used for primary and secondary text across the site.
- Semantic
Olive, Mustard, and Brick are used for status indicators like success, warning, and error messages.
Birkenstock color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Birkenstock brand color is Birkenstock Blue, hex code #00315C.
Birkenstock Blue (#00315C) is RGB(0, 49, 92) and CMYK(100, 47, 0, 64).
Birkenstock uses several grays in its UI: Light Gray (#F6F6F6), Surface Gray (#E5E5E5), Border Gray (#D1D1D1), and Muted Gray (#A3A3A3). These neutrals provide a clean, understated backdrop for product imagery.
Use Birkenstock Blue (#00315C) for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for highlights and status indications.
The secondary color is Birkenstock White, #FFFFFF, and the accent is Birkenstock Sand, #B7A16A. 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 Birkenstock's colors consistently when it generates UI.
Make something in the spirit of Birkenstock
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.