Costco color palette
EcommerceCostco's color identity is built around a bold red and blue palette, reflecting trust and value. The brand uses strong, simple colors for maximum visibility and recognition in retail and digital environments.
costco.comCostco colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Costco RedPrimary227, 24, 55
- Costco BlueSecondary0, 93, 170
- Costco YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Costco WhiteBackground255, 255, 255
- Costco Light GraySurface245, 245, 245
- Costco Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Costco BlackText34, 34, 34
- Costco Dark GraySecondary text84, 86, 90
- Costco Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Costco GreenSuccess0, 132, 61
- Costco Warning YellowWarning255, 184, 28
- Costco Error RedError200, 16, 46
- Costco Info BlueInfo0, 114, 206
Use Costco's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
costco-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #C8102E;
--accent: #FFD100;
--border: #D1D1D1;
--primary: #E31837;
--success: #00843D;
--surface: #F5F5F5;
--warning: #FFB81C;
--secondary: #005DAA;
--text-muted: #888888;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #54565A;
}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
7.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.7: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
Costco gray and neutral colors
The quiet part of the Costco palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Costco WhiteBackground
- HEX
- RGB
- HSL
- Costco Light GraySurface
- HEX
- RGB
- HSL
- Costco Border GrayBorder
- HEX
- RGB
- HSL
- Costco BlackText
- HEX
- RGB
- HSL
- Costco Dark GraySecondary text
- HEX
- RGB
- HSL
- Costco Muted GrayMuted text
- HEX
- RGB
- HSL
About Costco's colors
Costco's palette is dominated by red and blue, evoking energy, trust, and value. Neutrals are used for clarity and legibility in digital and print applications.
Primary red and blue are complementary and create strong contrast.
Yellow accent is used sparingly for calls to action.
Neutral grays and white provide balance and readability.
Psychology
Red conveys excitement and urgency, suitable for retail and promotions. Blue adds a sense of reliability and professionalism.
Evolution
Costco's color palette has remained consistent since its inception, focusing on brand recognition. Minor adjustments have been made to gray tones for improved digital accessibility.
Where Costco uses each color
- Primary
Costco Red is used in the logo, main navigation, and promotional banners.
- Secondary
Costco Blue appears in navigation bars, buttons, and membership materials.
- Accent
Costco Yellow highlights price tags, special offers, and call-to-action buttons.
- Backgrounds
Costco White and Light Gray are used for page backgrounds and product listings.
- Text
Costco Black and Dark Gray are used for primary and secondary text across the website and print materials.
- Semantic
Costco Green, Yellow, and Error Red are used for status messages, alerts, and notifications.
Costco color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Costco brand color hex code is #E31837, known as Costco Red.
Costco Red (#E31837) is RGB(227, 24, 55) and CMYK(0, 89, 76, 0).
Costco uses Light Gray (#F5F5F5), Border Gray (#D1D1D1), Dark Gray (#54565A), and Muted Gray (#888888) for backgrounds, borders, and text.
Use Costco Red (#E31837) for primary branding, Blue (#005DAA) for secondary elements, and neutrals for backgrounds and text to maintain brand consistency.
The secondary color is Costco Blue, #005DAA, and the accent is Costco 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 Costco's colors consistently when it generates UI.
Make something in the spirit of Costco
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.