Zappos color palette
EcommerceZappos uses a clean, approachable palette anchored by its signature blue, paired with neutral grays and subtle accents for clarity and accessibility. The color system emphasizes trust, friendliness, and usability across its ecommerce platform.
zappos.comZappos colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Zappos BluePrimary0, 51, 102
- Zappos Sky BlueSecondary0, 163, 224
- Zappos YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Zappos WhiteBackground255, 255, 255
- Zappos Light GraySurface245, 246, 247
- Zappos Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Zappos CharcoalText34, 34, 34
- Zappos Medium GraySecondary text85, 85, 85
- Zappos Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Zappos GreenSuccess46, 204, 64
- Zappos OrangeWarning255, 179, 0
- Zappos RedError231, 76, 60
- Zappos Info BlueInfo23, 162, 184
Use Zappos's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
zappos-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #17A2B8;
--error: #E74C3C;
--accent: #FFD100;
--border: #D1D5DB;
--primary: #003366;
--success: #2ECC40;
--surface: #F5F6F7;
--warning: #FFB300;
--secondary: #00A3E0;
--text-muted: #888888;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #555555;
}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.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
Zappos gray and neutral colors
The quiet part of the Zappos palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Zappos WhiteBackground
- HEX
- RGB
- HSL
- Zappos Light GraySurface
- HEX
- RGB
- HSL
- Zappos Border GrayBorder
- HEX
- RGB
- HSL
- Zappos CharcoalText
- HEX
- RGB
- HSL
- Zappos Medium GraySecondary text
- HEX
- RGB
- HSL
- Zappos Muted GrayMuted text
- HEX
- RGB
- HSL
About Zappos's colors
Zappos' palette is built around a strong blue primary, supported by light neutrals and a vibrant accent yellow. The system is designed for clarity, accessibility, and a friendly ecommerce experience.
Primary blue pairs with white and light gray for high contrast.
Accent yellow is used sparingly for highlights and calls to action.
Neutral grays support readability and structure.
Psychology
Blue conveys trust, reliability, and professionalism, which is essential for an ecommerce brand. The yellow accent adds warmth and approachability without overwhelming the interface.
Evolution
Zappos' core blue and neutral palette has remained stable since its early branding, with minor adjustments to accent colors for digital accessibility. The palette has evolved to include more nuanced grays for modern UI needs.
Where Zappos uses each color
- Primary
Used for the logo, main navigation bar, and key buttons.
- Secondary
Appears in secondary buttons, links, and some promotional banners.
- Accent
Used for highlights, notification badges, and call-to-action elements.
- Backgrounds
White and light gray backgrounds are used throughout product pages and checkout flows.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring readability.
- Semantic
Green, orange, and red are used for success, warning, and error messages respectively.
Zappos color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Zappos brand blue is #003366. This color is used in the logo and primary navigation.
Zappos Blue (#003366) has an RGB value of 0, 51, 102 and a CMYK value of 100, 50, 0, 60.
Zappos uses several grays: Zappos Light Gray (#F5F6F7) for surfaces, Border Gray (#D1D5DB) for lines, and Charcoal (#222222) for primary text.
Use Zappos Blue (#003366) for primary actions and branding, with Sky Blue (#00A3E0) and Yellow (#FFD100) for accents. Neutrals and semantic colors support UI clarity and accessibility.
The secondary color is Zappos Sky Blue, #00A3E0, and the accent is Zappos Yellow, #FFD100. 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 Zappos's colors consistently when it generates UI.
Make something in the spirit of Zappos
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
