Adidas Color Psychology & Meaning
Adidas black and white is the athlete's color — stripped of distraction, pure performance. The red appears only in specific sub-brands like Adidas Originals.
#FFFFFF
#000000
#E31B23
#EEEEEE
Background
Primary Accent
Secondary
Body Text
Adidas
minimalboldcool springsummer brandingfashion
Fail
WCAG Grade
1.2:1
Contrast Ratio
4,100
Saves
10,800
AI Copies
Use #FFFFFF as the background. Use #000000 as the primary accent. Use #E31B23 as secondary. Use #EEEEEE as body text/supporting color. Palette mood: Adidas — minimal, bold, cool.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Adidas color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Primary Accent Luminance: 0.0% | 0, 0, 0 | 0%, 0%, 0%, 100% | 0°, 0%, 0% | ||
| Secondary Luminance: 17.2% | 227, 27, 35 | 0%, 88%, 85%, 11% | 358°, 79%, 50% | ||
| Body Text Luminance: 85.5% | 238, 238, 238 | 0%, 0%, 0%, 7% | 0°, 0%, 93% |
Color Harmony: Triadic Scheme
The Adidas palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Adidas three stripes date to 1949. The brand has oscillated between black/white minimalism and colorful lifestyle positioning — the core palette always returns to B&W.
Best Design Use Cases
Black and white for all primary brand applications. Red only for specific heritage lines. Never mix brand identities.
Industries This Palette Suits
Athletic apparel, lifestyle, streetwear, sports.
How to Implement the Adidas Color Scheme
To use this Adidas color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FFFFFF for the main background and #000000 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #EEEEEE and #FFFFFF is 1.16:1 (Fail). Ensure your body text remains legible.