This palette translates Walmart’s familiar retail energy into a cleaner digital system built around bright blue, warm yellow, and a fresh spark of cyan. The combination preserves instant brand recognition while giving the interface stronger hierarchy, clearer calls to action, and more usable contrast across commerce touchpoints.
This palette translates Walmart’s familiar retail energy into a cleaner digital system built around bright blue, warm yellow, and a fresh spark of cyan. The combination preserves instant brand recognition while giving the interface stronger hierarchy, clearer calls to action, and more usable contrast across commerce touchpoints.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors use Walmart’s recognizable blue and yellow foundation with a vivid cyan accent that keeps the system energetic and unmistakably retail. Together they create a trusted, high-visibility palette that feels familiar without looking flat or generic.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors use Walmart’s recognizable blue and yellow foundation with a vivid cyan accent that keeps the system energetic and unmistakably retail. Together they create a trusted, high-visibility palette that feels familiar without looking flat or generic.
RolesLogo, Btn Primary Bg, Link
This blue carries the core Walmart recognition and gives the palette a dependable retail anchor.
#0071CE0, 113, 206207, 100, 40100, 45, 0, 19RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
This yellow adds the signature promotional warmth and keeps the system lively and approachable.
#FFC220255, 194, 3244, 100, 560, 24, 87, 0RolesHeadline
This brighter blue adds a cleaner digital emphasis and supports hierarchy without competing with the brand blue.
#00A8E10, 168, 225195, 100, 44100, 25, 0, 12The support colors extend the retail palette with a restrained mint and a soft gold that improve usability and balance. They stay subordinate to the main colors while adding subtle versatility for icons, borders, and interface accents.
RolesIcon, Border
This mint softens the interface and provides a calm supporting accent for UI structure.
#8FD3C8143, 211, 200170, 44, 6932, 0, 5, 17RolesDivider, Outline
This warm gold bridges the yellow into neutral UI details and keeps separators connected to the brand mood.
#E7B94A231, 185, 7442, 77, 600, 20, 68, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesBg Dark, Text, Btn Secondary Text
#11182717, 24, 39221, 39, 1156, 38, 0, 85Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-walmart-blue: #0071CE;
--color-walmart-yellow: #FFC220;
--color-digital-sky-blue: #00A8E1;
--color-mint-support: #8FD3C8;
--color-warm-gold-support: #E7B94A;
--color-pure-white: #FFFFFF;
--color-cloud-white: #F5F7FA;
--color-midnight-charcoal: #111827;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #0071CE;
--role-btn-primary-bg: #0071CE;
--role-link: #0071CE;
--role-btn-secondary-bg: #FFC220;
--role-btn-outlined-border: #FFC220;
--role-btn-outlined-text: #FFC220;
--role-headline: #00A8E1;
--role-icon: #8FD3C8;
--role-border: #8FD3C8;
--role-divider: #E7B94A;
--role-outline: #E7B94A;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #111827;
--role-text: #111827;
--role-btn-secondary-text: #111827;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"walmart-blue": "#0071CE",
"walmart-yellow": "#FFC220",
"digital-sky-blue": "#00A8E1",
"mint-support": "#8FD3C8",
"warm-gold-support": "#E7B94A",
"pure-white": "#FFFFFF",
"cloud-white": "#F5F7FA",
"midnight-charcoal": "#111827"
}