Walmart color palette
EcommerceWalmart's color identity is anchored by its signature blue, complemented by yellow and a range of neutral grays for UI clarity. The palette is designed for approachability, trust, and clear navigation across digital and physical touchpoints.
walmart.comWalmart colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Walmart BluePrimary0, 113, 206
- Walmart Spark YellowSecondary255, 194, 32
- Walmart Light GrayAccent245, 245, 245
Surfaces
Page, cards and dividers.- Walmart WhiteBackground255, 255, 255
- Walmart Surface GraySurface242, 242, 242
- Walmart Border GrayBorder216, 216, 216
Text
Three tiers of copy.- Walmart CharcoalText34, 34, 34
- Walmart Medium GraySecondary text110, 110, 110
- Walmart Muted GrayMuted text162, 162, 162
Semantic
Feedback and state colors.- Walmart Success GreenSuccess0, 132, 61
- Walmart Warning AmberWarning255, 182, 0
- Walmart Error RedError208, 2, 27
- Walmart Info BlueInfo0, 92, 185
Use Walmart's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
walmart-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #005CB9;
--error: #D0021B;
--accent: #F5F5F5;
--border: #D8D8D8;
--primary: #0071CE;
--success: #00843D;
--surface: #F2F2F2;
--warning: #FFB600;
--secondary: #FFC220;
--text-muted: #A2A2A2;
--background: #FFFFFF;
--text-primary: #222222;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2: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.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Walmart gray and neutral colors
The quiet part of the Walmart palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Walmart WhiteBackground
- HEX
- RGB
- HSL
- Walmart Surface GraySurface
- HEX
- RGB
- HSL
- Walmart Border GrayBorder
- HEX
- RGB
- HSL
- Walmart CharcoalText
- HEX
- RGB
- HSL
- Walmart Medium GraySecondary text
- HEX
- RGB
- HSL
- Walmart Muted GrayMuted text
- HEX
- RGB
- HSL
About Walmart's colors
Walmart's palette uses a bold blue as its foundation, supported by yellow for highlights and a neutral gray spectrum for clarity. The colors are chosen for accessibility and strong brand recognition.
Blue and yellow provide high contrast for calls to action.
Neutrals balance the vibrancy of the primary and secondary colors.
Accent and surface grays enhance readability and focus.
Psychology
Blue conveys trust, reliability, and approachability, which are core to Walmart's brand. Yellow adds warmth and energy, making the brand feel friendly and accessible.
Evolution
Walmart's core blue and yellow palette has remained consistent for decades, reinforcing brand recognition. Minor adjustments to gray tones and accent colors have been made for digital accessibility and modern UI needs.
Where Walmart uses each color
- Primary
Walmart Blue is used for headers, navigation bars, and primary buttons.
- Secondary
Walmart Spark Yellow appears in the logo, promotional highlights, and icons.
- Accent
Walmart Light Gray is used for backgrounds, cards, and subtle dividers.
- Backgrounds
Walmart White is the main background for web and app screens.
- Text
Walmart Charcoal and Medium Gray are used for primary and secondary text throughout the UI.
- Semantic
Success, warning, error, and info colors are used for status indicators, alerts, and feedback messages.
Walmart color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Walmart primary color is Walmart Blue, with the official hex code #0071CE.
Walmart Blue (#0071CE) in RGB is (0, 113, 206) and in CMYK is (100, 45, 0, 19).
Walmart uses a range of grays such as Walmart Light Gray (#F5F5F5), Surface Gray (#F2F2F2), Border Gray (#D8D8D8), and Charcoal (#222222) for backgrounds, borders, and text.
Use Walmart Blue (#0071CE) for primary actions and navigation, Spark Yellow (#FFC220) for highlights, and the gray spectrum for backgrounds and text to ensure clarity and accessibility.
The secondary color is Walmart Spark Yellow, #FFC220, and the accent is Walmart Light Gray, #F5F5F5. 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 Walmart's colors consistently when it generates UI.
Make something in the spirit of Walmart
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
