Michelin color palette
AutomotiveMichelin's color identity is anchored by its iconic blue and yellow, reflecting reliability and innovation in the automotive industry. The palette is clean, professional, and instantly recognizable across all brand touchpoints.
michelin.comMichelin colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Michelin BluePrimary0, 85, 164
- Michelin YellowSecondary255, 210, 0
- Michelin WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Michelin Light GrayBackground246, 246, 246
- Michelin Surface GraySurface229, 229, 229
- Michelin Border GrayBorder199, 199, 199
Text
Three tiers of copy.- Michelin BlackText35, 35, 35
- Michelin Dark GraySecondary text75, 75, 75
- Michelin Muted GrayMuted text138, 138, 138
Semantic
Feedback and state colors.- Michelin Success GreenSuccess92, 184, 92
- Michelin Warning AmberWarning255, 193, 7
- Michelin Error RedError217, 83, 79
- Michelin Info BlueInfo23, 162, 184
Use Michelin's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
michelin-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #17A2B8;
--error: #D9534F;
--accent: #FFFFFF;
--border: #C7C7C7;
--primary: #0055A4;
--success: #5CB85C;
--surface: #E5E5E5;
--warning: #FFC107;
--secondary: #FFD200;
--text-muted: #8A8A8A;
--background: #F6F6F6;
--text-primary: #232323;
--text-secondary: #4B4B4B;
}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.5:1
Pass
Text on surface
Needs 4.5:1 for body text
12.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.2:1
Pass
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
Michelin gray and neutral colors
The quiet part of the Michelin palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Michelin Light GrayBackground
- HEX
- RGB
- HSL
- Michelin Surface GraySurface
- HEX
- RGB
- HSL
- Michelin Border GrayBorder
- HEX
- RGB
- HSL
- Michelin BlackText
- HEX
- RGB
- HSL
- Michelin Dark GraySecondary text
- HEX
- RGB
- HSL
- Michelin Muted GrayMuted text
- HEX
- RGB
- HSL
About Michelin's colors
Michelin's palette is dominated by a strong blue and vibrant yellow, supported by clean whites and neutral grays for clarity and professionalism. The colors are chosen for high visibility and brand recognition.
Primary blue and secondary yellow are complementary and create strong contrast.
Neutrals provide balance and support content legibility.
Accent white is used for clarity and separation.
Psychology
Blue conveys trust, dependability, and expertise, aligning with Michelin's brand values. Yellow adds energy and draws attention, especially in call-to-action elements.
Evolution
Michelin's palette has remained consistent for decades, with blue and yellow always central. Minor adjustments have been made to neutral tones for digital clarity.
Where Michelin uses each color
- Primary
Michelin Blue is used for navigation bars, headers, and key brand elements.
- Secondary
Michelin Yellow highlights buttons, CTAs, and important information.
- Accent
Michelin White is used for backgrounds, logo, and negative space.
- Backgrounds
Michelin Light Gray provides the main website and app background.
- Text
Michelin Black and Dark Gray are used for primary and secondary text, ensuring readability.
- Semantic
Success, warning, error, and info colors are used in alerts, notifications, and status indicators.
Michelin color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Michelin brand blue is #0055A4. This color is used as the primary identifier across all brand materials.
Michelin Blue (#0055A4) has an RGB value of (0, 85, 164) and a CMYK value of (100, 48, 0, 36). These values are specified in the brand guidelines.
Michelin uses several grays: Light Gray (#F6F6F6), Surface Gray (#E5E5E5), Border Gray (#C7C7C7), Dark Gray (#4B4B4B), and Muted Gray (#8A8A8A). These support UI clarity and accessibility.
Use Michelin Blue (#0055A4) for primary navigation and branding, Michelin Yellow (#FFD200) for highlights, and neutrals for backgrounds and text. Maintain strong contrast for accessibility and brand consistency.
The secondary color is Michelin Yellow, #FFD200, and the accent is Michelin White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
5 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 Michelin's colors consistently when it generates UI.
Make something in the spirit of Michelin
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.