Adidas color palette
FashionAdidas' color identity is defined by a bold, minimalist palette centered on black and white, reflecting its heritage of clarity and performance. The brand uses a restrained set of neutrals and accents to maintain visual consistency across products and digital platforms.
adidas.comAdidas colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Adidas BlackPrimary0, 0, 0
- Adidas WhiteSecondary255, 255, 255
- Adidas Light GrayAccent196, 196, 196
Surfaces
Page, cards and dividers.- Adidas Off WhiteBackground245, 245, 245
- Adidas Surface GraySurface229, 229, 229
- Adidas Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Adidas Text BlackText0, 0, 0
- Adidas Text GraySecondary text118, 118, 118
- Adidas Muted GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- Adidas Success GreenSuccess0, 129, 60
- Adidas Warning YellowWarning255, 184, 0
- Adidas Error RedError211, 45, 47
- Adidas Info BlueInfo0, 113, 206
Use Adidas's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
adidas-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0071CE;
--error: #D32D2F;
--accent: #C4C4C4;
--border: #D1D1D1;
--primary: #000000;
--success: #00813C;
--surface: #E5E5E5;
--warning: #FFB800;
--secondary: #FFFFFF;
--text-muted: #B3B3B3;
--background: #F5F5F5;
--text-primary: #000000;
--text-secondary: #767676;
}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
4.2:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
3.6:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
Adidas gray and neutral colors
The quiet part of the Adidas palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Adidas Off WhiteBackground
- HEX
- RGB
- HSL
- Adidas Surface GraySurface
- HEX
- RGB
- HSL
- Adidas Border GrayBorder
- HEX
- RGB
- HSL
- Adidas Text BlackText
- HEX
- RGB
- HSL
- Adidas Text GraySecondary text
- HEX
- RGB
- HSL
- Adidas Muted GrayMuted text
- HEX
- RGB
- HSL
About Adidas's colors
Adidas employs a high-contrast, monochromatic palette to emphasize clarity and timelessness. The brand's use of black and white supports versatility across products, digital, and print.
Primary black and white create strong visual contrast.
Grays are used for depth and hierarchy in UI.
Accent colors are reserved for functional messaging (success, warning, error).
Psychology
Black conveys authority, sophistication, and performance, aligning with Adidas' athletic identity. White and gray tones provide balance, cleanliness, and approachability.
Evolution
Adidas' palette has remained stable for decades, reinforcing brand recognition. Occasional accent colors are introduced for campaigns or collaborations, but the core black and white scheme is consistent.
Where Adidas uses each color
- Primary
Adidas Black is used for the logo, navigation bars, and primary text.
- Secondary
Adidas White is featured in backgrounds, product packaging, and secondary text.
- Accent
Adidas Light Gray appears in UI elements, dividers, and subtle highlights.
- Backgrounds
Adidas Off White is the default background for web and app screens.
- Text
Adidas Text Black and Text Gray are used for headlines, body copy, and secondary information.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status messages and notifications in digital interfaces.
Adidas color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Adidas primary color hex code is #000000. This black is used for the logo and key brand elements.
Adidas Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100). These values ensure consistency across digital and print media.
Adidas uses several neutral grays, including Adidas Light Gray (#C4C4C4), Surface Gray (#E5E5E5), and Border Gray (#D1D1D1), to create depth and structure in UI and print layouts.
Use Adidas Black (#000000) and White (#FFFFFF) as dominant colors, with grays for backgrounds and accents. Reserve accent and semantic colors for functional elements like notifications and status indicators.
The secondary color is Adidas White, #FFFFFF, and the accent is Adidas Light Gray, #C4C4C4. Together with the primary they make up the three brand colors at the top of this page.
2 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 Adidas's colors consistently when it generates UI.
Make something in the spirit of Adidas
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.