Peugeot color palette
AutomotivePeugeot's brand color identity is defined by a sophisticated use of black, silver, and deep blue tones, reflecting its modern, premium automotive positioning. The palette emphasizes contrast and clarity, with a strong focus on dark neutrals and metallic accents.
peugeot.comPeugeot colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Peugeot BlackPrimary0, 0, 0
- Peugeot SilverSecondary167, 169, 172
- Peugeot BlueAccent34, 58, 94
Surfaces
Page, cards and dividers.- Peugeot Light GrayBackground245, 245, 245
- Peugeot GraphiteSurface26, 26, 26
- Peugeot Silver GrayBorder209, 211, 212
Text
Three tiers of copy.- Peugeot BlackText0, 0, 0
- Peugeot BlueSecondary text34, 58, 94
- Peugeot Medium GrayMuted text109, 110, 113
Semantic
Feedback and state colors.- Peugeot Success GreenSuccess75, 181, 67
- Peugeot Warning YellowWarning255, 180, 0
- Peugeot Error RedError208, 2, 27
- Peugeot Info BlueInfo0, 114, 206
Use Peugeot's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
peugeot-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D0021B;
--accent: #223A5E;
--border: #D1D3D4;
--primary: #000000;
--success: #4BB543;
--surface: #1A1A1A;
--warning: #FFB400;
--secondary: #A7A9AC;
--text-muted: #6D6E71;
--background: #F5F5F5;
--text-primary: #000000;
--text-secondary: #223A5E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.3:1
Pass
Text on surface
Needs 4.5:1 for body text
1.2:1
Fail
Secondary text on background
Needs 4.5:1 for body text
10.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
1.5:1
Fail
Muted text on background
Needs 3:1 for large text
4.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Peugeot background, border and text colors
The quiet part of the Peugeot palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Peugeot Light GrayBackground
- HEX
- RGB
- HSL
- Peugeot GraphiteSurface
- HEX
- RGB
- HSL
- Peugeot Silver GrayBorder
- HEX
- RGB
- HSL
- Peugeot BlackText
- HEX
- RGB
- HSL
- Peugeot BlueSecondary text
- HEX
- RGB
- HSL
- Peugeot Medium GrayMuted text
- HEX
- RGB
- HSL
About Peugeot's colors
Peugeot's palette is built around deep black and metallic silver, accented by a signature blue. These colors create a sense of modernity, reliability, and premium quality.
Primary black contrasts with silver and blue for clarity.
Blue is used sparingly for highlights and accents.
Grays and silvers provide depth and hierarchy in UI.
Psychology
Black conveys sophistication, authority, and timelessness, while silver and blue add a sense of technology and trust. The restrained use of color supports Peugeot's premium, innovative image.
Evolution
Peugeot's palette has evolved from brighter blues and reds to a more monochrome, metallic scheme in recent years. The current palette emphasizes black and silver, aligning with the updated logo and brand direction.
Where Peugeot uses each color
- Primary
Used for the logo, navigation bars, and major headings.
- Secondary
Appears in backgrounds, dividers, and UI elements to create contrast.
- Accent
Used for call-to-action buttons, links, and highlights.
- Backgrounds
Light gray backgrounds are used for website sections and app screens.
- Text
Primary black is used for main text, with blue and gray for secondary and muted text.
- Semantic
Green, yellow, red, and info blue are used for status indicators and alerts in digital interfaces.
Peugeot color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Peugeot primary color hex code is #000000. This black is used for the logo and major UI elements.
Peugeot Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100). Use this exact value for brand consistency.
Peugeot uses a range of grays, including Peugeot Silver (#A7A9AC), Peugeot Light Gray (#F5F5F5), and Peugeot Medium Gray (#6D6E71). These provide depth and hierarchy across digital interfaces.
Use Peugeot Black (#000000) for primary elements, Silver (#A7A9AC) and Light Gray (#F5F5F5) for backgrounds and surfaces, and Peugeot Blue (#223A5E) for accents and highlights. Always follow the brand's hierarchy and contrast guidelines.
The secondary color is Peugeot Silver, #A7A9AC, and the accent is Peugeot Blue, #223A5E. 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 Peugeot's colors consistently when it generates UI.
Make something in the spirit of Peugeot
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.