Asics color palette
SportsAsics is a global sportswear brand known for its distinctive deep blue and white color scheme, reflecting performance and reliability. The palette emphasizes clarity and athleticism across all touchpoints.
asics.comAsics colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Asics BluePrimary0, 44, 95
- Asics WhiteSecondary255, 255, 255
- Asics YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Asics Light GrayBackground245, 245, 245
- Asics Surface GraySurface230, 231, 232
- Asics Border GrayBorder191, 197, 204
Text
Three tiers of copy.- Asics Blue TextText0, 44, 95
- Asics Secondary TextSecondary text77, 92, 109
- Asics Muted TextMuted text122, 134, 154
Semantic
Feedback and state colors.- Asics Success GreenSuccess110, 180, 63
- Asics Warning YellowWarning255, 209, 0
- Asics Error RedError215, 38, 49
- Asics Info BlueInfo0, 159, 218
Use Asics's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
asics-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FDA;
--error: #D72631;
--accent: #FFD100;
--border: #BFC5CC;
--primary: #002C5F;
--success: #6EB43F;
--surface: #E6E7E8;
--warning: #FFD100;
--secondary: #FFFFFF;
--text-muted: #7A869A;
--background: #F5F5F5;
--text-primary: #002C5F;
--text-secondary: #4D5C6D;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.6:1
Pass
Text on surface
Needs 4.5:1 for body text
11.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Fail
Asics background, border and text colors
The quiet part of the Asics palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Asics Light GrayBackground
- HEX
- RGB
- HSL
- Asics Surface GraySurface
- HEX
- RGB
- HSL
- Asics Border GrayBorder
- HEX
- RGB
- HSL
- Asics Blue TextText
- HEX
- RGB
- HSL
- Asics Secondary TextSecondary text
- HEX
- RGB
- HSL
- Asics Muted TextMuted text
- HEX
- RGB
- HSL
About Asics's colors
Asics uses a palette centered on a deep blue and white, conveying trust and athletic excellence. Accents of yellow and green provide energy and clarity for calls to action and feedback states.
Primary blue contrasts with white for strong brand recognition.
Accent yellow is used sparingly for highlights and warnings.
Grays support UI clarity and accessibility.
Psychology
The deep blue signifies reliability, professionalism, and calm focus, aligning with athletic performance. Yellow accents add vibrancy and draw attention to key elements.
Evolution
The core blue and white palette has remained consistent for decades, reinforcing brand recognition. Minor adjustments to accent and gray tones have been made for digital accessibility.
Where Asics uses each color
- Primary
Asics Blue is used in the logo, navigation bars, and key brand elements.
- Secondary
Asics White appears in backgrounds, text, and product packaging.
- Accent
Asics Yellow highlights CTAs, notifications, and select product details.
- Backgrounds
Asics Light Gray is the main website and app background color.
- Text
Asics Blue Text is used for main headings and links, with secondary and muted tones for body and supporting text.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status messages and feedback in digital interfaces.
Asics color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Asics brand color is Asics Blue, hex code #002C5F.
Asics Blue is RGB(0, 44, 95) and typically CMYK(100, 54, 0, 63).
Asics uses Light Gray (#F5F5F5), Surface Gray (#E6E7E8), and Border Gray (#BFC5CC) for backgrounds, surfaces, and UI borders.
Use Asics Blue for primary branding and navigation, white and grays for backgrounds and surfaces, and yellow or green for accents and status. Always maintain sufficient contrast for accessibility.
The secondary color is Asics White, #FFFFFF, and the accent is Asics Yellow, #FFD100. 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 Asics's colors consistently when it generates UI.
Make something in the spirit of Asics
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.