Heinz color palette
Food & DrinkHeinz's brand color system is defined by its iconic red, complemented by deep neutrals and gold accents, reflecting its heritage and product packaging. The palette is bold, classic, and instantly recognizable across all touchpoints.
heinz.comHeinz colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Heinz RedPrimary228, 26, 28
- Heinz WhiteSecondary255, 255, 255
- Heinz GoldAccent246, 199, 0
Surfaces
Page, cards and dividers.- Heinz Light GrayBackground247, 247, 247
- Heinz Surface GraySurface242, 242, 242
- Heinz Border GrayBorder214, 214, 214
Text
Three tiers of copy.- Heinz BlackText26, 26, 26
- Heinz Dark GraySecondary text102, 102, 102
- Heinz Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Heinz GreenSuccess61, 139, 55
- Heinz GoldWarning246, 199, 0
- Heinz RedError228, 26, 28
- Heinz BlueInfo0, 102, 179
Use Heinz's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
heinz-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0066B3;
--error: #E41A1C;
--accent: #F6C700;
--border: #D6D6D6;
--primary: #E41A1C;
--success: #3D8B37;
--surface: #F2F2F2;
--warning: #F6C700;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F7F7F7;
--text-primary: #1A1A1A;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.2:1
Pass
Text on surface
Needs 4.5:1 for body text
15.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Heinz gray and neutral colors
The quiet part of the Heinz palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Heinz Light GrayBackground
- HEX
- RGB
- HSL
- Heinz Surface GraySurface
- HEX
- RGB
- HSL
- Heinz Border GrayBorder
- HEX
- RGB
- HSL
- Heinz BlackText
- HEX
- RGB
- HSL
- Heinz Dark GraySecondary text
- HEX
- RGB
- HSL
- Heinz Muted GrayMuted text
- HEX
- RGB
- HSL
About Heinz's colors
Heinz's palette centers on a vivid red, symbolizing appetite and tradition, supported by clean whites and subtle grays for clarity. Gold accents evoke quality and heritage.
Primary red is paired with white for high contrast.
Gold is used for premium cues and highlights.
Grays provide neutral backgrounds for product imagery.
Psychology
Red stimulates appetite and draws attention, making it ideal for food branding. Gold signals quality and tradition, while neutrals keep the focus on products.
Evolution
Heinz's color palette has remained remarkably stable, with 'Heinz Red' at its core for decades. Minor adjustments have been made to grays and golds for digital clarity, but the overall scheme is consistent.
Where Heinz uses each color
- Primary
Heinz Red is used for logos, primary buttons, and key packaging elements.
- Secondary
Heinz White appears in backgrounds, text, and as a contrast color on packaging.
- Accent
Heinz Gold is used for highlights, seals, and premium cues on packaging and digital assets.
- Backgrounds
Heinz Light Gray and Surface Gray are used for website backgrounds and UI surfaces.
- Text
Heinz Black and Dark Gray are used for primary and secondary text across digital and print.
- Semantic
Heinz Green, Gold, Red, and Blue are used for status indicators, alerts, and informational banners.
Heinz color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Heinz brand red is #E41A1C. This color is used across all major branding and packaging.
Heinz Red (#E41A1C) in RGB is (228, 26, 28) and in CMYK is (0, 89, 88, 11). These values ensure consistency in print and digital.
Heinz uses Light Gray (#F7F7F7), Surface Gray (#F2F2F2), Border Gray (#D6D6D6), and text grays like #666666 and #999999 for UI and backgrounds.
Heinz Red (#E41A1C) should dominate key brand elements, with white and gray backgrounds for clarity and gold for accent. Always use official hex codes for digital and print consistency.
The secondary color is Heinz White, #FFFFFF, and the accent is Heinz Gold, #F6C700. 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 Heinz's colors consistently when it generates UI.
Make something in the spirit of Heinz
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.