Mizuno color palette
SportsMizuno's brand color system is defined by a bold, deep blue paired with clean whites and neutral grays, reflecting the brand's heritage and focus on performance. The palette is consistent across digital and physical applications, emphasizing clarity and trust.
mizunousa.comMizuno colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Mizuno BluePrimary0, 40, 86
- Mizuno WhiteSecondary255, 255, 255
- Mizuno SilverAccent198, 198, 198
Surfaces
Page, cards and dividers.- Mizuno Light GrayBackground245, 245, 245
- Mizuno Surface GraySurface229, 229, 229
- Mizuno Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Mizuno CharcoalText34, 34, 34
- Mizuno Medium GraySecondary text102, 102, 102
- Mizuno Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Mizuno Success GreenSuccess0, 153, 102
- Mizuno Warning YellowWarning255, 179, 0
- Mizuno Error RedError211, 47, 47
- Mizuno Info BlueInfo25, 118, 210
Use Mizuno's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mizuno-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #C6C6C6;
--border: #D1D3D4;
--primary: #002856;
--success: #009966;
--surface: #E5E5E5;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F5F5F5;
--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.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
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Mizuno gray and neutral colors
The quiet part of the Mizuno palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Mizuno Light GrayBackground
- HEX
- RGB
- HSL
- Mizuno Surface GraySurface
- HEX
- RGB
- HSL
- Mizuno Border GrayBorder
- HEX
- RGB
- HSL
- Mizuno CharcoalText
- HEX
- RGB
- HSL
- Mizuno Medium GraySecondary text
- HEX
- RGB
- HSL
- Mizuno Muted GrayMuted text
- HEX
- RGB
- HSL
About Mizuno's colors
Mizuno's palette centers on a strong blue, conveying reliability and athletic excellence, complemented by neutrals for clarity and focus. The color system is functional and minimal, supporting a wide range of sports products and digital experiences.
Primary blue contrasts with white for high visibility.
Grays provide hierarchy and depth in UI.
Accent silver adds a premium, metallic touch.
Psychology
Blue evokes trust, professionalism, and calm, aligning with Mizuno's reputation for quality. The neutral tones ensure the focus remains on products and content.
Evolution
Mizuno's core blue has remained consistent for decades, reinforcing brand recognition. Minor adjustments to gray tones have modernized the palette for digital use.
Where Mizuno uses each color
- Primary
Used in the logo, navigation bars, and key call-to-action buttons.
- Secondary
Backgrounds, product packaging, and secondary buttons.
- Accent
Highlights, borders, and metallic elements on equipment.
- Backgrounds
Main website and app backgrounds, providing a neutral base.
- Text
Charcoal and medium gray are used for primary and secondary text throughout digital and print materials.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and system messages in digital interfaces.
Mizuno color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Mizuno brand blue is #002856, known as 'Mizuno Blue'.
Mizuno Blue (#002856) has an RGB value of (0, 40, 86) and a CMYK value of (100, 53, 0, 66).
Mizuno uses a range of grays including Mizuno Light Gray (#F5F5F5), Surface Gray (#E5E5E5), and Border Gray (#D1D3D4) for backgrounds and UI elements.
Use Mizuno Blue (#002856) for primary branding and navigation, with whites and grays for backgrounds and text to maintain clarity and accessibility.
The secondary color is Mizuno White, #FFFFFF, and the accent is Mizuno Silver, #C6C6C6. 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 Mizuno's colors consistently when it generates UI.
Make something in the spirit of Mizuno
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.