Porsche color palette
AutomotivePorsche's color identity centers on its iconic red, paired with a palette of deep blacks, silvers, and neutral grays that reflect its legacy of luxury and performance. The brand uses these colors consistently across digital and print assets to convey precision and heritage.
porsche.comPorsche colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Porsche RedPrimary177, 43, 40
- Porsche BlackSecondary0, 0, 0
- Porsche SilverAccent165, 167, 170
Surfaces
Page, cards and dividers.- Porsche Light GrayBackground245, 245, 245
- Porsche WhiteSurface255, 255, 255
- Porsche Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Porsche CharcoalText25, 25, 25
- Porsche Medium GraySecondary text110, 110, 110
- Porsche SilverMuted text165, 167, 170
Semantic
Feedback and state colors.- Porsche Success GreenSuccess58, 154, 91
- Porsche Warning OrangeWarning245, 166, 35
- Porsche Error RedError208, 2, 27
- Porsche Info BlueInfo0, 114, 206
Use Porsche's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
porsche-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D0021B;
--accent: #A5A7AA;
--border: #D1D3D4;
--primary: #B12B28;
--success: #3A9A5B;
--surface: #FFFFFF;
--warning: #F5A623;
--secondary: #000000;
--text-muted: #A5A7AA;
--background: #F5F5F5;
--text-primary: #191919;
--text-secondary: #6E6E6E;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
17.6: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
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Porsche gray and neutral colors
The quiet part of the Porsche palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Porsche Light GrayBackground
- HEX
- RGB
- HSL
- Porsche WhiteSurface
- HEX
- RGB
- HSL
- Porsche Border GrayBorder
- HEX
- RGB
- HSL
- Porsche CharcoalText
- HEX
- RGB
- HSL
- Porsche Medium GraySecondary text
- HEX
- RGB
- HSL
- Porsche SilverMuted text
- HEX
- RGB
- HSL
About Porsche's colors
Porsche's palette is grounded in a bold, saturated red, complemented by deep blacks and refined metallic grays. The color system is designed for clarity, luxury, and timelessness.
Primary red contrasts with black for high visibility.
Metallic silver and grays add sophistication and neutrality.
Accent colors are used sparingly to highlight actions or status.
Psychology
The red signifies passion, performance, and excitement, aligning with Porsche's racing heritage. Black and gray tones evoke luxury, exclusivity, and technical precision.
Evolution
Porsche's core palette has remained stable, with red, black, and silver consistently used since the brand's early years. Minor adjustments have been made to gray tones for digital clarity.
Where Porsche uses each color
- Primary
Porsche Red is used for call-to-action buttons, highlights, and key brand marks.
- Secondary
Porsche Black is featured in navigation bars, footers, and vehicle imagery backgrounds.
- Accent
Porsche Silver appears in UI accents, icons, and as a metallic highlight in print.
- Backgrounds
Porsche Light Gray and White are used for website and app backgrounds to maintain readability.
- Text
Charcoal and Medium Gray are used for primary and secondary text across digital platforms.
- Semantic
Success, warning, error, and info colors are used for status indicators and notifications in digital interfaces.
Porsche color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Porsche primary color hex code is #B12B28. This red is used for key brand elements and CTAs.
Porsche Red (#B12B28) in RGB is (177, 43, 40) and in CMYK is approximately (0, 76, 77, 31). Always use the hex code for digital applications.
Porsche uses a range of grays including Porsche Light Gray (#F5F5F5), Border Gray (#D1D3D4), and Charcoal (#191919) for backgrounds, borders, and text. These neutrals provide a clean, premium look.
Use Porsche Red (#B12B28) for primary actions and highlights, with black and silver for structure and accents. Grays and whites support readability and maintain the brand's refined aesthetic.
The secondary color is Porsche Black, #000000, and the accent is Porsche Silver, #A5A7AA. 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 Porsche's colors consistently when it generates UI.
Make something in the spirit of Porsche
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.