Energizer color palette
ConsumerEnergizer's color identity is defined by its bold, high-contrast palette, led by the signature Energizer Red and accented by deep black and bright white. The palette is designed for maximum visibility and brand recognition across packaging and digital interfaces.
energizer.comEnergizer colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Energizer RedPrimary228, 27, 19
- Energizer BlackSecondary35, 31, 32
- Energizer YellowAccent249, 178, 51
Surfaces
Page, cards and dividers.- Energizer WhiteBackground255, 255, 255
- Energizer Light GraySurface244, 244, 244
- Energizer SilverBorder209, 211, 212
Text
Three tiers of copy.- Energizer BlackText35, 31, 32
- Energizer Medium GraySecondary text109, 110, 113
- Energizer Light GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- Energizer GreenSuccess141, 198, 63
- Energizer YellowWarning249, 178, 51
- Energizer RedError228, 27, 19
- Energizer BlueInfo0, 114, 188
Use Energizer's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
energizer-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072BC;
--error: #E41B13;
--accent: #F9B233;
--border: #D1D3D4;
--primary: #E41B13;
--success: #8DC63F;
--surface: #F4F4F4;
--warning: #F9B233;
--secondary: #231F20;
--text-muted: #A7A8AA;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}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.3:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8: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.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Energizer gray and neutral colors
The quiet part of the Energizer palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Energizer WhiteBackground
- HEX
- RGB
- HSL
- Energizer Light GraySurface
- HEX
- RGB
- HSL
- Energizer SilverBorder
- HEX
- RGB
- HSL
- Energizer BlackText
- HEX
- RGB
- HSL
- Energizer Medium GraySecondary text
- HEX
- RGB
- HSL
- Energizer Light GrayMuted text
- HEX
- RGB
- HSL
About Energizer's colors
Energizer's palette is built on high-contrast, energetic hues that emphasize visibility and clarity. The combination of red, black, and yellow creates a sense of urgency and power.
Primary red is complemented by yellow for highlights.
Black and white provide strong contrast for legibility.
Accent blue and green are used sparingly for functional signals.
Psychology
Red communicates energy, urgency, and action, aligning with the brand's promise of power. Black and white reinforce clarity and reliability.
Evolution
Energizer's core palette has remained consistent for decades, with red and black always at the forefront. Minor adjustments have been made to accent and neutral tones to modernize digital interfaces.
Where Energizer uses each color
- Primary
Energizer Red is used for primary buttons, key highlights, and packaging elements.
- Secondary
Energizer Black is used for navigation bars, backgrounds, and product text.
- Accent
Energizer Yellow highlights callouts, icons, and promotional banners.
- Backgrounds
Energizer White and Light Gray are used for page and card backgrounds.
- Text
Energizer Black and Medium Gray are used for primary and secondary text, respectively.
- Semantic
Green, yellow, and blue are used for status indicators, warnings, and informational messages in digital products.
Energizer color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Energizer brand color is Energizer Red, hex code #E41B13.
Energizer Red is RGB(228, 27, 19) and typically CMYK(0, 88, 92, 0). The hex code is #E41B13.
Energizer uses Light Gray (#F4F4F4), Silver (#D1D3D4), Medium Gray (#6D6E71), and Light Gray for muted text (#A7A8AA) throughout its UI and packaging.
Use Energizer Red (#E41B13) for primary actions and highlights, with black and white for backgrounds and text. Accent colors like yellow and blue should be reserved for emphasis and status indicators.
The secondary color is Energizer Black, #231F20, and the accent is Energizer Yellow, #F9B233. 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 Energizer's colors consistently when it generates UI.
Make something in the spirit of Energizer
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.