McLaren color palette
AutomotiveMcLaren's color identity is defined by its signature Papaya Orange, accented with black, white, and metallic tones for a bold, high-performance look. The palette reflects the brand's racing heritage and modern engineering.
mclaren.comMcLaren colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- McLaren Papaya OrangePrimary255, 0, 0
- McLaren BlackSecondary0, 0, 0
- McLaren WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- McLaren Light GreyBackground245, 245, 245
- McLaren Surface GreySurface229, 229, 229
- McLaren Border GreyBorder200, 200, 200
Text
Three tiers of copy.- McLaren Text BlackText0, 0, 0
- McLaren Text GreySecondary text85, 85, 85
- McLaren Muted GreyMuted text136, 136, 136
Semantic
Feedback and state colors.- McLaren Success GreenSuccess39, 174, 96
- McLaren Warning OrangeWarning243, 156, 18
- McLaren Error RedError192, 57, 43
- McLaren Info BlueInfo41, 128, 185
Use McLaren's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mclaren-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2980B9;
--error: #C0392B;
--accent: #FFFFFF;
--border: #C8C8C8;
--primary: #FF0000;
--success: #27AE60;
--surface: #E5E5E5;
--warning: #F39C12;
--secondary: #000000;
--text-muted: #888888;
--background: #F5F5F5;
--text-primary: #000000;
--text-secondary: #555555;
}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
16.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
McLaren gray and neutral colors
The quiet part of the McLaren palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- McLaren Light GreyBackground
- HEX
- RGB
- HSL
- McLaren Surface GreySurface
- HEX
- RGB
- HSL
- McLaren Border GreyBorder
- HEX
- RGB
- HSL
- McLaren Text BlackText
- HEX
- RGB
- HSL
- McLaren Text GreySecondary text
- HEX
- RGB
- HSL
- McLaren Muted GreyMuted text
- HEX
- RGB
- HSL
About McLaren's colors
McLaren's palette centers on a vibrant orange, contrasted with black, white, and neutral greys for clarity and impact. The use of bold accent colors supports a dynamic, technical brand image.
High contrast between Papaya Orange and black for visibility.
Neutral greys balance the vivid primary color.
White is used for clarity and separation.
Psychology
Papaya Orange conveys energy, innovation, and speed, aligning with McLaren's racing legacy. Black and grey tones add sophistication and a sense of advanced engineering.
Evolution
The Papaya Orange has been a consistent element since McLaren's early racing days, with minor adjustments for digital and print accuracy. The supporting palette has evolved to include more neutral greys for modern UI needs.
Where McLaren uses each color
- Primary
Papaya Orange is used for key brand marks, call-to-action buttons, and vehicle liveries.
- Secondary
Black appears in navigation bars, backgrounds, and as a contrast element.
- Accent
White is used for text, highlights, and to provide visual separation.
- Backgrounds
Light greys are used for page backgrounds and content areas.
- Text
Text is primarily black or dark grey for maximum legibility.
- Semantic
Green, orange, red, and blue are used for status indicators and notifications in digital interfaces.
McLaren color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official McLaren primary color hex code is #FF0000. This is known as McLaren Papaya Orange.
The RGB value for #FF0000 is (255, 0, 0). For print, the closest CMYK equivalent is (0, 100, 100, 0).
McLaren uses several greys in its UI: Light Grey (#F5F5F5), Surface Grey (#E5E5E5), Border Grey (#C8C8C8), and Text Grey (#555555). These provide contrast and structure in digital and print materials.
Papaya Orange (#FF0000) should be reserved for key actions and branding, while black, white, and greys structure layouts and backgrounds. Accent and semantic colors are used sparingly for clarity and emphasis.
The secondary color is McLaren Black, #000000, and the accent is McLaren 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 McLaren's colors consistently when it generates UI.
Make something in the spirit of McLaren
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.