Citroën color palette
AutomotiveCitroën's color identity is defined by its iconic red, complemented by a clean, modern palette of whites, greys, and black. The colors reinforce the brand’s French automotive heritage and contemporary design ethos.
citroen.comCitroën colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Citroën RedPrimary218, 41, 28
- Citroën WhiteSecondary255, 255, 255
- Citroën Silver GreyAccent167, 169, 172
Surfaces
Page, cards and dividers.- Citroën Light GreyBackground245, 245, 245
- Citroën UI GreySurface229, 229, 229
- Citroën Line GreyBorder209, 211, 212
Text
Three tiers of copy.- Citroën BlackText34, 34, 34
- Citroën Dark GreySecondary text109, 110, 113
- Citroën Silver GreyMuted text167, 169, 172
Semantic
Feedback and state colors.- Citroën Success GreenSuccess75, 181, 67
- Citroën Warning YellowWarning255, 180, 0
- Citroën RedError218, 41, 28
- Citroën Info BlueInfo0, 159, 227
Use Citroën's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
citroen-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FE3;
--error: #DA291C;
--accent: #A7A9AC;
--border: #D1D3D4;
--primary: #DA291C;
--success: #4BB543;
--surface: #E5E5E5;
--warning: #FFB400;
--secondary: #FFFFFF;
--text-muted: #A7A9AC;
--background: #F5F5F5;
--text-primary: #222222;
--text-secondary: #6D6E71;
}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
12.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
4.0:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Citroën gray and neutral colors
The quiet part of the Citroën palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Citroën Light GreyBackground
- HEX
- RGB
- HSL
- Citroën UI GreySurface
- HEX
- RGB
- HSL
- Citroën Line GreyBorder
- HEX
- RGB
- HSL
- Citroën BlackText
- HEX
- RGB
- HSL
- Citroën Dark GreySecondary text
- HEX
- RGB
- HSL
- Citroën Silver GreyMuted text
- HEX
- RGB
- HSL
About Citroën's colors
Citroën’s palette is anchored by a vivid red, balanced by neutral greys and whites for clarity and modernity. The colors are chosen for high visibility and a sense of technological sophistication.
Red is used for brand recognition and key actions.
Neutrals provide a clean, minimal background.
Accent blue and green are reserved for status and informational cues.
Psychology
The red evokes energy, passion, and French heritage, while the neutrals convey reliability and simplicity. Blue and green accents support trust and positive feedback.
Evolution
Citroën’s palette has remained consistent, with red as the core brand color for decades. Recent updates have refined the greys and introduced subtle accent colors for digital interfaces.
Where Citroën uses each color
- Primary
Citroën Red is used in the logo, primary buttons, and key highlights across digital and print.
- Secondary
Citroën White is the main background for web pages and print materials.
- Accent
Citroën Silver Grey appears in navigation bars, dividers, and subtle UI elements.
- Backgrounds
Citroën Light Grey is used for page backgrounds and section containers.
- Text
Citroën Black and Dark Grey are used for primary and secondary text, ensuring readability.
- Semantic
Success Green, Warning Yellow, and Info Blue are used for alerts, notifications, and status messages.
Citroën color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Citroën primary color hex code is #DA291C. This red is used for the logo and key brand elements.
Citroën Red (#DA291C) is RGB(218, 41, 28) and CMYK(0, 81, 87, 15). These values ensure color consistency across media.
Citroën uses a range of greys such as Citroën Light Grey (#F5F5F5), UI Grey (#E5E5E5), and Line Grey (#D1D3D4) for backgrounds and borders. These neutrals support a clean, modern interface.
Use Citroën Red (#DA291C) for branding and key actions, while neutrals and accents structure the UI and highlight information. Always maintain sufficient contrast for accessibility.
The secondary color is Citroën White, #FFFFFF, and the accent is Citroën Silver Grey, #A7A9AC. 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 Citroën's colors consistently when it generates UI.
Make something in the spirit of Citroën
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.