Kroger color palette
Food & DrinkKroger's brand identity centers on a bold blue primary color, reflecting trust and reliability, complemented by a clean white and a range of neutral grays for clarity and accessibility. The palette is consistent across digital and print, emphasizing approachability and freshness.
kroger.comKroger colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Kroger BluePrimary0, 51, 160
- Kroger WhiteSecondary255, 255, 255
- Kroger Light BlueAccent0, 147, 208
Surfaces
Page, cards and dividers.- Kroger Light GrayBackground246, 246, 246
- Kroger Surface GraySurface237, 237, 237
- Kroger Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Kroger CharcoalText34, 34, 34
- Kroger Medium GraySecondary text85, 85, 85
- Kroger Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Kroger GreenSuccess67, 176, 42
- Kroger YellowWarning255, 184, 28
- Kroger RedError228, 0, 43
- Kroger Info BlueInfo0, 147, 208
Use Kroger's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
kroger-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0093D0;
--error: #E4002B;
--accent: #0093D0;
--border: #D1D3D4;
--primary: #0033A0;
--success: #43B02A;
--surface: #EDEDED;
--warning: #FFB81C;
--secondary: #FFFFFF;
--text-muted: #888888;
--background: #F6F6F6;
--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
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
13.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Pass
Kroger gray and neutral colors
The quiet part of the Kroger palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Kroger Light GrayBackground
- HEX
- RGB
- HSL
- Kroger Surface GraySurface
- HEX
- RGB
- HSL
- Kroger Border GrayBorder
- HEX
- RGB
- HSL
- Kroger CharcoalText
- HEX
- RGB
- HSL
- Kroger Medium GraySecondary text
- HEX
- RGB
- HSL
- Kroger Muted GrayMuted text
- HEX
- RGB
- HSL
About Kroger's colors
Kroger's palette uses a dominant blue for trust and reliability, with white and grays for clarity and accessibility. Accent colors provide visual cues for status and interaction.
Primary blue paired with white for strong contrast.
Accent blue and green used for calls to action and success states.
Neutral grays support readability and structure.
Psychology
Blue is associated with trust, dependability, and freshness, aligning with Kroger's brand values. The use of green and yellow signals positivity and approachability.
Evolution
Kroger's blue has been a core brand element for decades, with minor adjustments to tone for digital clarity. The supporting palette has expanded to include more nuanced grays and accent colors for modern UI needs.
Where Kroger uses each color
- Primary
Used for the Kroger logo, navigation bar, and key buttons.
- Secondary
Applied as the main background and for negative space.
- Accent
Highlights links, icons, and interactive elements.
- Backgrounds
Light gray backgrounds are used for app screens and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text across digital and print.
- Semantic
Green, yellow, and red are used for success, warning, and error states in UI feedback.
Kroger color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Kroger brand color is Kroger Blue, hex code #0033A0.
Kroger Blue (#0033A0) is RGB(0, 51, 160) and CMYK(100, 68, 0, 37).
Kroger uses a range of grays including Kroger Light Gray (#F6F6F6), Surface Gray (#EDEDED), and Border Gray (#D1D3D4) for backgrounds and borders.
Kroger Blue (#0033A0) should be dominant, with white and grays for backgrounds and text, and accent colors for highlights and status indicators.
The secondary color is Kroger White, #FFFFFF, and the accent is Kroger Light Blue, #0093D0. 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 Kroger's colors consistently when it generates UI.
Make something in the spirit of Kroger
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.