Tommy Hilfiger color palette
FashionTommy Hilfiger's color identity is defined by its iconic red, white, and blue, reflecting classic American style and nautical influences. The palette is bold, instantly recognizable, and used consistently across all brand touchpoints.
usa.tommy.comTommy Hilfiger colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tommy Navy BluePrimary42, 47, 115
- Tommy RedSecondary230, 57, 70
- Tommy WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Tommy Light GrayBackground245, 245, 245
- Tommy Pale GraySurface240, 240, 240
- Tommy Silver GrayBorder209, 211, 212
Text
Three tiers of copy.- Tommy CharcoalText34, 34, 34
- Tommy Medium GraySecondary text85, 85, 85
- Tommy Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Tommy GreenSuccess60, 179, 113
- Tommy GoldWarning255, 179, 0
- Tommy Error RedError215, 38, 61
- Tommy Info BlueInfo25, 118, 210
Use Tommy Hilfiger's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tommy-hilfiger-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D7263D;
--accent: #FFFFFF;
--border: #D1D3D4;
--primary: #2A2F73;
--success: #3CB371;
--surface: #F0F0F0;
--warning: #FFB300;
--secondary: #E63946;
--text-muted: #888888;
--background: #F5F5F5;
--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.6:1
Pass
Text on surface
Needs 4.5:1 for body text
14.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.5: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.1:1
Pass
Tommy Hilfiger gray and neutral colors
The quiet part of the Tommy Hilfiger palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tommy Light GrayBackground
- HEX
- RGB
- HSL
- Tommy Pale GraySurface
- HEX
- RGB
- HSL
- Tommy Silver GrayBorder
- HEX
- RGB
- HSL
- Tommy CharcoalText
- HEX
- RGB
- HSL
- Tommy Medium GraySecondary text
- HEX
- RGB
- HSL
- Tommy Muted GrayMuted text
- HEX
- RGB
- HSL
About Tommy Hilfiger's colors
Tommy Hilfiger's palette is rooted in the American flag, using navy, red, and white for a timeless, preppy look. The colors are chosen for high contrast and strong brand recognition.
Primary blue and red are complementary and balanced by white.
Neutral grays support the bold primaries in UI contexts.
Accent colors are used sparingly to maintain focus on the core palette.
Psychology
Navy blue conveys trust, reliability, and sophistication, while red adds energy and boldness. White provides clarity and a clean, modern feel.
Evolution
The Tommy Hilfiger palette has remained largely unchanged since the brand's inception, maintaining its classic American identity. Minor updates have refined the gray tones for digital use.
Where Tommy Hilfiger uses each color
- Primary
Tommy Navy Blue is used for navigation bars, headers, and key brand elements.
- Secondary
Tommy Red appears on call-to-action buttons, highlights, and signature flag details.
- Accent
Tommy White is used for backgrounds, logo elements, and text contrast.
- Backgrounds
Tommy Light Gray and Pale Gray serve as page and section backgrounds on the website.
- Text
Tommy Charcoal and Medium Gray are used for primary and secondary body text.
- Semantic
Tommy Green, Gold, Error Red, and Info Blue are used for status indicators, alerts, and messaging.
Tommy Hilfiger color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Tommy Hilfiger primary color is 'Tommy Navy Blue' with hex code #2A2F73.
Tommy Navy Blue is #2A2F73, which is RGB(42, 47, 115) and CMYK(63, 59, 0, 55).
Tommy Hilfiger uses 'Tommy Light Gray' (#F5F5F5), 'Tommy Pale Gray' (#F0F0F0), and 'Tommy Silver Gray' (#D1D3D4) for backgrounds and borders.
Primary colors should dominate key brand elements, while grays and accents are used for backgrounds, text, and UI support. Maintain high contrast and use red and blue sparingly for emphasis.
The secondary color is Tommy Red, #E63946, and the accent is Tommy White, #FFFFFF. 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 Tommy Hilfiger's colors consistently when it generates UI.
Make something in the spirit of Tommy Hilfiger
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.