Zippo color palette
ConsumerZippo's color identity centers on a bold, instantly recognizable red paired with deep black and metallic neutrals, reflecting its iconic lighters and rugged brand heritage. The palette is minimal and timeless, emphasizing durability and classic Americana.
zippo.comZippo colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Zippo RedPrimary228, 27, 19
- Zippo BlackSecondary35, 31, 32
- Zippo SilverAccent167, 169, 172
Surfaces
Page, cards and dividers.- Zippo WhiteBackground255, 255, 255
- Zippo Light GraySurface245, 245, 245
- Zippo Border GrayBorder199, 200, 202
Text
Three tiers of copy.- Zippo BlackText35, 31, 32
- Zippo Medium GraySecondary text117, 120, 123
- Zippo SilverMuted text167, 169, 172
Semantic
Feedback and state colors.- Zippo GreenSuccess75, 166, 79
- Zippo OrangeWarning245, 166, 35
- Zippo RedError228, 27, 19
- Zippo BlueInfo20, 115, 230
Use Zippo's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
zippo-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1473E6;
--error: #E41B13;
--accent: #A7A9AC;
--border: #C7C8CA;
--primary: #E41B13;
--success: #4BA64F;
--surface: #F5F5F5;
--warning: #F5A623;
--secondary: #231F20;
--text-muted: #A7A9AC;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #75787B;
}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
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.4:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
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
Zippo gray and neutral colors
The quiet part of the Zippo palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Zippo WhiteBackground
- HEX
- RGB
- HSL
- Zippo Light GraySurface
- HEX
- RGB
- HSL
- Zippo Border GrayBorder
- HEX
- RGB
- HSL
- Zippo BlackText
- HEX
- RGB
- HSL
- Zippo Medium GraySecondary text
- HEX
- RGB
- HSL
- Zippo SilverMuted text
- HEX
- RGB
- HSL
About Zippo's colors
Zippo's palette is dominated by a signature red, balanced with black and metallic neutrals to evoke strength and reliability. The color system is simple, functional, and instantly recognizable.
Red and black provide strong contrast for brand recognition.
Silver and gray tones support a metallic, industrial feel.
White backgrounds ensure clarity and product focus.
Psychology
Red conveys energy, passion, and boldness, aligning with Zippo's adventurous spirit. Black and metallics reinforce durability and a premium, classic image.
Evolution
The Zippo palette has remained largely unchanged for decades, maintaining its classic red and black identity. Minor adjustments to gray and silver tones have modernized the UI while preserving the brand's heritage.
Where Zippo uses each color
- Primary
Zippo Red is used for the logo, key calls-to-action, and product highlights.
- Secondary
Zippo Black appears in navigation bars, footers, and background elements.
- Accent
Zippo Silver is used for metallic UI accents, icons, and lighter imagery.
- Backgrounds
Zippo White and Light Gray are used for page backgrounds and content areas.
- Text
Zippo Black and Medium Gray are used for primary and secondary text throughout the site.
- Semantic
Green, orange, and blue are used for status indicators, alerts, and informational messages.
Zippo color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Zippo brand color is Zippo Red, with the hex code #E41B13.
Zippo Red (#E41B13) in RGB is 228, 27, 19 and in CMYK is 0, 88, 92, 11.
Zippo uses Zippo Light Gray (#F5F5F5), Border Gray (#C7C8CA), and Medium Gray (#75787B) for backgrounds, borders, and secondary text.
Use Zippo Red (#E41B13) for primary branding and actions, with black and metallics for structure and accents. Grays and white provide clarity and support for content areas.
The secondary color is Zippo Black, #231F20, and the accent is Zippo Silver, #A7A9AC. Together with the primary they make up the three brand colors at the top of this page.
2 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 Zippo's colors consistently when it generates UI.
Make something in the spirit of Zippo
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.