Allbirds color palette
FashionAllbirds' color identity is rooted in natural, neutral tones with a signature soft black and off-white, reflecting its sustainable ethos and minimalist design. The palette is understated, focusing on eco-friendly, earthy hues and subtle contrasts.
allbirds.comAllbirds colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Allbirds CharcoalPrimary33, 33, 33
- Allbirds Off-WhiteSecondary245, 245, 240
- Allbirds StoneAccent168, 162, 158
Surfaces
Page, cards and dividers.- Allbirds WhiteBackground255, 255, 255
- Allbirds Off-WhiteSurface245, 245, 240
- Allbirds Light BorderBorder224, 222, 217
Text
Three tiers of copy.- Allbirds CharcoalText33, 33, 33
- Allbirds Medium GraySecondary text110, 110, 110
- Allbirds StoneMuted text168, 162, 158
Semantic
Feedback and state colors.- Allbirds GreenSuccess124, 179, 66
- Allbirds YellowWarning255, 214, 0
- Allbirds RedError229, 57, 53
- Allbirds BlueInfo2, 136, 209
Use Allbirds's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
allbirds-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #E53935;
--accent: #A8A29E;
--border: #E0DED9;
--primary: #212121;
--success: #7CB342;
--surface: #F5F5F0;
--warning: #FFD600;
--secondary: #F5F5F0;
--text-muted: #A8A29E;
--background: #FFFFFF;
--text-primary: #212121;
--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
16.1: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
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Allbirds background, border and text colors
The quiet part of the Allbirds palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Allbirds WhiteBackground
- HEX
- RGB
- HSL
- Allbirds Off-WhiteSurface
- HEX
- RGB
- HSL
- Allbirds Light BorderBorder
- HEX
- RGB
- HSL
- Allbirds CharcoalText
- HEX
- RGB
- HSL
- Allbirds Medium GraySecondary text
- HEX
- RGB
- HSL
- Allbirds StoneMuted text
- HEX
- RGB
- HSL
About Allbirds's colors
Allbirds employs a palette of soft neutrals and earth-inspired hues to reinforce its sustainable, natural brand values. The restrained use of color places emphasis on product and material rather than visual noise.
Primary charcoal contrasts with off-white backgrounds for clarity.
Accent stone gray provides subtle depth and hierarchy.
Minimal use of saturated colors for semantic states (success, warning, error).
Psychology
The neutral palette evokes calm, trust, and a connection to nature, aligning with Allbirds' eco-friendly mission. The understated tones suggest simplicity and transparency.
Evolution
Allbirds' palette has remained stable, consistently favoring neutrals and avoiding bright, trendy colors. Occasional seasonal accents appear in product lines, but the core UI colors are unchanged.
Where Allbirds uses each color
- Primary
Used for main navigation text, logo, and key headlines.
- Secondary
Backgrounds, product cards, and secondary UI surfaces.
- Accent
Borders, dividers, and muted text elements.
- Backgrounds
Predominantly white or off-white for clean product presentation.
- Text
Charcoal for primary text, medium gray for secondary, and stone for muted or disabled states.
- Semantic
Green, yellow, red, and blue are reserved for status messages, alerts, and notifications.
Allbirds color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Allbirds brand color is 'Allbirds Charcoal' with hex code #212121.
Allbirds Charcoal (#212121) in RGB is (33, 33, 33); in CMYK it is approximately (0, 0, 0, 87).
Allbirds uses 'Allbirds Stone' (#A8A29E) and 'Allbirds Medium Gray' (#6E6E6E) as its main neutral and gray tones for UI and text.
Use the charcoal and off-white as primary contrasts, with stone and medium gray for supporting elements. Reserve green, yellow, red, and blue for semantic or status indications only.
The secondary color is Allbirds Off-White, #F5F5F0, and the accent is Allbirds Stone, #A8A29E. 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 Allbirds's colors consistently when it generates UI.
Make something in the spirit of Allbirds
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.