Nike Color Psychology & Meaning
Nike's black and white palette is a statement of athletic purity. The orange appears only for Nike Air and running lines — urgency and energy in a single accent.
#111111
#FFFFFF
#FA5400
#D4D4D4
Background
Primary Accent
Secondary
Body Text
Nike
boldnightminimal springsummerautumnwinter brandingfashion
AAA
WCAG Grade
12.7:1
Contrast Ratio
5,500
Saves
14,800
AI Copies
Use #111111 as the background. Use #FFFFFF as the primary accent. Use #FA5400 as secondary. Use #D4D4D4 as body text/supporting color. Palette mood: Nike — bold, night, minimal.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Nike 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: 0.6% | 17, 17, 17 | 0%, 0%, 0%, 93% | 0°, 0%, 7% | ||
| Primary Accent Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Secondary Luminance: 26.7% | 250, 84, 0 | 0%, 66%, 100%, 2% | 20°, 100%, 49% | ||
| Body Text Luminance: 65.8% | 212, 212, 212 | 0%, 0%, 0%, 17% | 0°, 0%, 83% |
Color Harmony: Analogous Scheme
The Nike palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Nike's brand design dates to the 1971 Swoosh. The minimalist palette evolved through the Jordan era and became the global standard for premium athletic brands.
Best Design Use Cases
Black and white only for the core brand. Never dilute the identity with multiple accent colors. When orange appears, it should be the only accent.
Industries This Palette Suits
Athletic apparel, footwear, sports equipment, fitness.
How to Implement the Nike Color Scheme
To use this Nike 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 #111111 for the main background and #FFFFFF for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #D4D4D4 and #111111 is 12.74:1 (AAA). Ensure your body text remains legible.