Puma color palette
FashionPuma's color identity is defined by a bold, dark primary shade, complemented by high-contrast white and signature red accents. The palette is minimal, functional, and instantly recognizable in sportswear and fashion contexts.
puma.comPuma colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Puma BlackPrimary36, 43, 47
- Puma WhiteSecondary255, 255, 255
- Puma RedAccent226, 35, 26
Surfaces
Page, cards and dividers.- Puma Light GrayBackground245, 245, 245
- Puma Surface GraySurface230, 230, 230
- Puma Border GrayBorder199, 199, 199
Text
Three tiers of copy.- Puma Black TextText36, 43, 47
- Puma Gray TextSecondary text109, 109, 109
- Puma Muted GrayMuted text162, 162, 162
Semantic
Feedback and state colors.- Puma Success GreenSuccess60, 184, 120
- Puma Warning YellowWarning246, 166, 9
- Puma RedError226, 35, 26
- Puma Info BlueInfo0, 150, 214
Use Puma's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
puma-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0096D6;
--error: #E2231A;
--accent: #E2231A;
--border: #C7C7C7;
--primary: #242B2F;
--success: #3CB878;
--surface: #E6E6E6;
--warning: #F6A609;
--secondary: #FFFFFF;
--text-muted: #A2A2A2;
--background: #F5F5F5;
--text-primary: #242B2F;
--text-secondary: #6D6D6D;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.2:1
Pass
Text on surface
Needs 4.5:1 for body text
11.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
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.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Puma gray and neutral colors
The quiet part of the Puma palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Puma Light GrayBackground
- HEX
- RGB
- HSL
- Puma Surface GraySurface
- HEX
- RGB
- HSL
- Puma Border GrayBorder
- HEX
- RGB
- HSL
- Puma Black TextText
- HEX
- RGB
- HSL
- Puma Gray TextSecondary text
- HEX
- RGB
- HSL
- Puma Muted GrayMuted text
- HEX
- RGB
- HSL
About Puma's colors
Puma's palette uses a dominant dark neutral, contrasted with white and a vivid red accent for high visibility and brand recognition. The supporting grays provide clarity and structure in digital and physical applications.
Primary and secondary colors create strong contrast for legibility.
Red accent is reserved for calls to action and brand highlights.
Neutral grays unify backgrounds and surfaces for a clean UI.
Psychology
The primary dark tone conveys strength, reliability, and sophistication. Red injects energy and urgency, reflecting Puma's sports heritage.
Evolution
Puma's core palette has remained stable, with black, white, and red as longstanding brand identifiers. Grays and supporting colors have been refined for digital clarity and accessibility.
Where Puma uses each color
- Primary
Used for logo, navigation bars, and main headlines.
- Secondary
Backgrounds, product photography backdrops, and text on dark surfaces.
- Accent
Buttons, highlights, promotional banners, and key details on apparel.
- Backgrounds
Light gray backgrounds are used for website sections and product grids.
- Text
Primary black for main text, gray for secondary information, and muted gray for disabled or less important text.
- Semantic
Success green for confirmation messages, warning yellow for alerts, red for errors and urgent notifications, and blue for informational banners.
Puma color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Puma primary color hex code is #242B2F. This shade is used across branding and digital interfaces.
Puma Black (#242B2F) in RGB is (36, 43, 47). For CMYK, it is approximately (23, 9, 0, 82).
Puma uses several gray tones: Light Gray (#F5F5F5), Surface Gray (#E6E6E6), Border Gray (#C7C7C7), and Muted Gray (#A2A2A2). These provide structure and hierarchy in the UI.
Use Puma Black (#242B2F) for primary elements and text, Puma Red (#E2231A) for accents and calls to action, and Puma White (#FFFFFF) for backgrounds and contrast. Grays support layout clarity and accessibility.
The secondary color is Puma White, #FFFFFF, and the accent is Puma Red, #E2231A. Together with the primary they make up the three brand colors at the top of this page.
3 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 Puma's colors consistently when it generates UI.
Make something in the spirit of Puma
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.