Wayfair color palette
EcommerceWayfair's color identity centers on a distinctive purple, complemented by a clean, neutral UI palette and vibrant accent colors. The brand's palette is designed for clarity, accessibility, and a welcoming ecommerce experience.
wayfair.comWayfair colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Wayfair PurplePrimary111, 44, 145
- Wayfair GoldSecondary247, 201, 72
- Wayfair OrangeAccent224, 79, 22
Surfaces
Page, cards and dividers.- Wayfair WhiteBackground255, 255, 255
- Wayfair Light GraySurface245, 245, 246
- Wayfair Border GrayBorder216, 216, 216
Text
Three tiers of copy.- Wayfair CharcoalText34, 34, 34
- Wayfair PurpleSecondary text111, 44, 145
- Wayfair Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Wayfair GreenSuccess60, 180, 110
- Wayfair GoldWarning247, 201, 72
- Wayfair RedError215, 38, 61
- Wayfair BlueInfo0, 153, 204
Use Wayfair's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
wayfair-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099CC;
--error: #D7263D;
--accent: #E04F16;
--border: #D8D8D8;
--primary: #6F2C91;
--success: #3CB46E;
--surface: #F5F5F6;
--warning: #F7C948;
--secondary: #F7C948;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #6F2C91;
}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.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.9: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.2:1
Pass
Wayfair background, border and text colors
The quiet part of the Wayfair palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Wayfair WhiteBackground
- HEX
- RGB
- HSL
- Wayfair Light GraySurface
- HEX
- RGB
- HSL
- Wayfair Border GrayBorder
- HEX
- RGB
- HSL
- Wayfair CharcoalText
- HEX
- RGB
- HSL
- Wayfair PurpleSecondary text
- HEX
- RGB
- HSL
- Wayfair Muted GrayMuted text
- HEX
- RGB
- HSL
About Wayfair's colors
Wayfair's palette is anchored by a signature purple, evoking creativity and approachability, balanced with warm accents and neutral backgrounds. The color system supports clarity and accessibility across digital and print touchpoints.
Primary purple is contrasted with gold and orange accents.
Neutral grays provide structure and readability.
Vibrant accent colors highlight calls to action and notifications.
Psychology
Purple suggests creativity, quality, and a welcoming environment, while gold and orange add warmth and energy. The neutral grays and white backgrounds promote trust and clarity for ecommerce transactions.
Evolution
Wayfair's purple has remained consistent as the core brand color since its rebranding. The supporting palette has evolved to include more accessible neutrals and vibrant accents for modern UI needs.
Where Wayfair uses each color
- Primary
Used in the logo, primary navigation, and key call-to-action buttons.
- Secondary
Appears in highlights, promotional banners, and secondary buttons.
- Accent
Used for sale tags, notifications, and interactive elements.
- Backgrounds
White and light gray backgrounds are used for main page areas and product listings.
- Text
Charcoal and muted gray are used for primary and secondary text throughout the site.
- Semantic
Green, gold, red, and blue are used for success, warning, error, and informational messages respectively.
Wayfair color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Wayfair brand color is Wayfair Purple, hex code #6F2C91.
Wayfair Purple (#6F2C91) is RGB(111, 44, 145) and CMYK(23, 70, 0, 43).
Wayfair uses Wayfair Light Gray (#F5F5F6), Wayfair Border Gray (#D8D8D8), and Wayfair Charcoal (#222222) for backgrounds, borders, and text.
Use Wayfair Purple (#6F2C91) for primary branding and calls to action, with gold and orange as accents, and neutrals for backgrounds and text for optimal readability.
The secondary color is Wayfair Gold, #F7C948, and the accent is Wayfair Orange, #E04F16. 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 Wayfair's colors consistently when it generates UI.
Make something in the spirit of Wayfair
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
