Warby Parker color palette
FashionWarby Parker's brand identity centers on a distinctive blue paired with crisp neutrals and understated grays, reflecting a modern, approachable, and trustworthy fashion ethos. Their palette is consistent across digital and physical touchpoints, emphasizing clarity and accessibility.
warbyparker.comWarby Parker colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Warby Parker BluePrimary41, 70, 165
- Warby Light GraySecondary245, 247, 250
- Warby TealAccent0, 179, 176
Surfaces
Page, cards and dividers.- Warby WhiteBackground255, 255, 255
- Warby Surface GraySurface240, 242, 245
- Warby Border GrayBorder225, 228, 234
Text
Three tiers of copy.- Warby CharcoalText26, 26, 26
- Warby SlateSecondary text79, 91, 107
- Warby Muted GrayMuted text140, 152, 164
Semantic
Feedback and state colors.- Warby Success GreenSuccess43, 196, 138
- Warby Warning YellowWarning255, 179, 0
- Warby Error RedError225, 74, 74
- Warby Info BlueInfo75, 123, 229
Use Warby Parker's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
warby-parker-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4B7BE5;
--error: #E14A4A;
--accent: #00B3B0;
--border: #E1E4EA;
--primary: #2946A5;
--success: #2BC48A;
--surface: #F0F2F5;
--warning: #FFB300;
--secondary: #F5F7FA;
--text-muted: #8C98A4;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4F5B6B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
15.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.2:1
Pass
Muted text on background
Needs 3:1 for large text
2.9:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Warby Parker background, border and text colors
The quiet part of the Warby Parker palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Warby WhiteBackground
- HEX
- RGB
- HSL
- Warby Surface GraySurface
- HEX
- RGB
- HSL
- Warby Border GrayBorder
- HEX
- RGB
- HSL
- Warby CharcoalText
- HEX
- RGB
- HSL
- Warby SlateSecondary text
- HEX
- RGB
- HSL
- Warby Muted GrayMuted text
- HEX
- RGB
- HSL
About Warby Parker's colors
Warby Parker's palette uses a bold blue as a signature, complemented by clean whites and subtle grays for a modern, accessible look. Accent colors add vibrancy while maintaining a calm, trustworthy impression.
Primary blue contrasts with white for legibility.
Grays provide neutral backgrounds and surfaces.
Accent teal and blue add energy to calls-to-action.
Psychology
Blue conveys trust, reliability, and professionalism, aligning with Warby Parker's brand values. The balanced use of neutrals and accent colors creates a friendly, inviting atmosphere.
Evolution
Warby Parker's color palette has remained largely stable since launch, with minor refinements to blue and gray tones for digital clarity. The brand has consistently prioritized accessibility and legibility in its color choices.
Where Warby Parker uses each color
- Primary
Used for logo, navigation bars, and key buttons across the website and app.
- Secondary
Appears as background on product cards, overlays, and secondary UI elements.
- Accent
Highlights calls-to-action, links, and promotional banners.
- Backgrounds
White and light gray backgrounds are used for main content areas and product pages.
- Text
Charcoal and slate grays are used for primary and secondary text throughout digital and print materials.
- Semantic
Green, yellow, and red are used for success, warning, and error states in forms and notifications.
Warby Parker color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Warby Parker blue is #2946A5. This color is used prominently in their logo and primary navigation.
Warby Parker Blue (#2946A5) is RGB(41, 70, 165) and CMYK(75, 58, 0, 35). Use these values for accurate reproduction in digital and print.
Warby Parker uses a range of grays such as Warby Surface Gray (#F0F2F5), Warby Border Gray (#E1E4EA), and Warby Muted Gray (#8C98A4) for backgrounds, borders, and muted text. These ensure a clean, modern interface and strong text contrast.
Use Warby Parker Blue (#2946A5) for primary actions and branding, with grays and white for backgrounds and surfaces. Accent colors like Warby Teal (#00B3B0) should highlight important actions or information.
The secondary color is Warby Light Gray, #F5F7FA, and the accent is Warby Teal, #00B3B0. 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 Warby Parker's colors consistently when it generates UI.
Make something in the spirit of Warby Parker
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.