Suzuki color palette
AutomotiveSuzuki's color identity centers on a bold red paired with deep blue and clean white, reflecting its Japanese heritage and automotive legacy. The palette is simple, high-contrast, and consistent across branding and UI.
suzuki.comSuzuki colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Suzuki RedPrimary227, 6, 19
- Suzuki BlueSecondary0, 32, 91
- Suzuki WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Suzuki Light GrayBackground246, 246, 246
- Suzuki Surface WhiteSurface255, 255, 255
- Suzuki Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Suzuki CharcoalText34, 34, 34
- Suzuki Medium GraySecondary text102, 102, 102
- Suzuki Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- Suzuki GreenSuccess67, 176, 42
- Suzuki YellowWarning255, 184, 28
- Suzuki RedError227, 6, 19
- Suzuki Info BlueInfo0, 114, 206
Use Suzuki's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
suzuki-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E30613;
--accent: #FFFFFF;
--border: #D1D3D4;
--primary: #E30613;
--success: #43B02A;
--surface: #FFFFFF;
--warning: #FFB81C;
--secondary: #00205B;
--text-muted: #A7A9AC;
--background: #F6F6F6;
--text-primary: #222222;
--text-secondary: #666666;
}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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Suzuki gray and neutral colors
The quiet part of the Suzuki palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Suzuki Light GrayBackground
- HEX
- RGB
- HSL
- Suzuki Surface WhiteSurface
- HEX
- RGB
- HSL
- Suzuki Border GrayBorder
- HEX
- RGB
- HSL
- Suzuki CharcoalText
- HEX
- RGB
- HSL
- Suzuki Medium GraySecondary text
- HEX
- RGB
- HSL
- Suzuki Muted GrayMuted text
- HEX
- RGB
- HSL
About Suzuki's colors
Suzuki's palette uses strong primary colors to convey reliability and energy, with red as the dominant hue. The supporting blue and neutral tones create a sense of trust and clarity.
Red and blue provide a classic, high-contrast combination.
White and light gray support clean, readable layouts.
Accent colors are used sparingly for clarity and emphasis.
Psychology
Red communicates passion, excitement, and action, aligning with Suzuki's dynamic brand image. Blue adds a sense of trust and dependability, while neutrals keep the interface approachable.
Evolution
Suzuki's core red and blue colors have remained consistent for decades, reinforcing strong brand recognition. The supporting neutral palette has evolved slightly to enhance digital readability and accessibility.
Where Suzuki uses each color
- Primary
Suzuki Red is used for the logo, key buttons, and call-to-action elements.
- Secondary
Suzuki Blue appears in navigation bars, headers, and backgrounds for emphasis.
- Accent
Suzuki White is used for backgrounds, text, and to provide contrast throughout the UI.
- Backgrounds
Suzuki Light Gray is the main background for web pages and digital interfaces.
- Text
Suzuki Charcoal and Medium Gray are used for primary and secondary text, ensuring legibility.
- Semantic
Green, yellow, and info blue are used for status indicators, alerts, and informational highlights.
Suzuki color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Suzuki primary color is Suzuki Red, with the hex code #E30613.
Suzuki Red (#E30613) is RGB(227, 6, 19) and CMYK(0, 97, 92, 11).
Suzuki uses Suzuki Light Gray (#F6F6F6), Border Gray (#D1D3D4), and Charcoal (#222222) for backgrounds, borders, and text.
Use Suzuki Red (#E30613) for primary actions and branding, Suzuki Blue (#00205B) for navigation and highlights, and neutrals for backgrounds and text to maintain clarity.
The secondary color is Suzuki Blue, #00205B, and the accent is Suzuki White, #FFFFFF. 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 Suzuki's colors consistently when it generates UI.
Make something in the spirit of Suzuki
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.