Mazda color palette
AutomotiveMazda's color identity is defined by a deep, sophisticated black paired with vibrant red and refined metallic grays, reflecting the brand's focus on premium design and dynamic performance. The palette is minimal and modern, emphasizing contrast and clarity across digital and physical touchpoints.
mazda.comMazda colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Mazda Jet BlackPrimary16, 16, 16
- Mazda Soul RedSecondary215, 0, 29
- Mazda Machine GrayAccent166, 167, 168
Surfaces
Page, cards and dividers.- Mazda Pure WhiteBackground255, 255, 255
- Mazda Light GraySurface244, 244, 244
- Mazda Silver BorderBorder196, 196, 196
Text
Three tiers of copy.- Mazda Jet Black TextText16, 16, 16
- Mazda Graphite GraySecondary text79, 79, 79
- Mazda Muted GrayMuted text138, 138, 138
Semantic
Feedback and state colors.- Mazda Success GreenSuccess46, 133, 64
- Mazda Warning AmberWarning255, 179, 0
- Mazda Error RedError215, 0, 29
- Mazda Info BlueInfo0, 118, 192
Use Mazda's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mazda-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0076C0;
--error: #D7001D;
--accent: #A6A7A8;
--border: #C4C4C4;
--primary: #101010;
--success: #2E8540;
--surface: #F4F4F4;
--warning: #FFB300;
--secondary: #D7001D;
--text-muted: #8A8A8A;
--background: #FFFFFF;
--text-primary: #101010;
--text-secondary: #4F4F4F;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
17.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Mazda gray and neutral colors
The quiet part of the Mazda palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Mazda Pure WhiteBackground
- HEX
- RGB
- HSL
- Mazda Light GraySurface
- HEX
- RGB
- HSL
- Mazda Silver BorderBorder
- HEX
- RGB
- HSL
- Mazda Jet Black TextText
- HEX
- RGB
- HSL
- Mazda Graphite GraySecondary text
- HEX
- RGB
- HSL
- Mazda Muted GrayMuted text
- HEX
- RGB
- HSL
About Mazda's colors
Mazda’s palette centers on high-contrast black and white, with signature red and metallic gray accents for a premium, dynamic look. The restrained use of color highlights the brand’s focus on craftsmanship and clarity.
Primary black contrasts with white backgrounds for legibility.
Soul Red is reserved for highlights and calls to action.
Machine Gray and muted grays provide neutral balance.
Psychology
The deep black conveys sophistication and authority, while Soul Red evokes energy and passion. Metallic grays and whites reinforce Mazda’s commitment to quality and precision.
Evolution
Mazda’s color palette has remained consistent, with Soul Red and Jet Black as signature colors since the mid-2010s. The palette has evolved to include more refined grays for digital interfaces.
Where Mazda uses each color
- Primary
Mazda Jet Black is used for main navigation bars, headers, and key brand elements.
- Secondary
Mazda Soul Red appears in call-to-action buttons, highlights, and vehicle imagery.
- Accent
Mazda Machine Gray is used for dividers, UI accents, and backgrounds in digital materials.
- Backgrounds
Mazda Pure White is the default background for web and print layouts.
- Text
Mazda Jet Black and Graphite Gray are used for primary and secondary text, ensuring readability.
- Semantic
Success, warning, and error colors are used in forms, notifications, and system feedback components.
Mazda color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Mazda primary color hex code is #101010, known as Mazda Jet Black. Use this for main brand elements and navigation.
Mazda Jet Black (#101010) in RGB is (16, 16, 16) and in CMYK is (0, 0, 0, 94). Always match the hex for digital use.
Mazda uses Machine Gray (#A6A7A8), Light Gray (#F4F4F4), and Graphite Gray (#4F4F4F) for UI surfaces and text. These ensure clarity and a premium feel.
Use Jet Black (#101010) for primary elements, Soul Red (#D7001D) for highlights, and Machine Gray (#A6A7A8) for accents. Maintain high contrast and reserve red for key actions.
The secondary color is Mazda Soul Red, #D7001D, and the accent is Mazda Machine Gray, #A6A7A8. Together with the primary they make up the three brand colors at the top of this page.
6 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 Mazda's colors consistently when it generates UI.
Make something in the spirit of Mazda
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.