Nike color palette
ConsumerNike's iconic black-and-white brand identity lets the Swoosh and product photography speak loudest, using bold contrast and occasional vibrant accents for maximum athletic impact.
nike.comNike colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Nike BlackPrimary17, 17, 17
- Nike GraySecondary117, 117, 117
- Nike OrangeAccent250, 84, 0
Surfaces
Page, cards and dividers.- Nike WhiteBackground255, 255, 255
- Nike SurfaceSurface245, 245, 245
- Nike BorderBorder229, 229, 229
Text
Three tiers of copy.- Nike TextText17, 17, 17
- Nike SecondarySecondary text117, 117, 117
- Nike MutedMuted text153, 153, 153
Semantic
Feedback and state colors.- Nike GreenSuccess18, 138, 9
- Nike WarningWarning254, 80, 0
- Nike ErrorError212, 63, 33
- Nike BlueInfo0, 120, 255
Use Nike's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nike-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0078FF;
--error: #D43F21;
--accent: #FA5400;
--border: #E5E5E5;
--primary: #111111;
--success: #128A09;
--surface: #F5F5F5;
--warning: #FE5000;
--secondary: #757575;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #111111;
--text-secondary: #757575;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.9:1
Pass
Text on surface
Needs 4.5:1 for body text
17.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Nike gray and neutral colors
The quiet part of the Nike palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Nike WhiteBackground
- HEX
- RGB
- HSL
- Nike SurfaceSurface
- HEX
- RGB
- HSL
- Nike BorderBorder
- HEX
- RGB
- HSL
- Nike TextText
- HEX
- RGB
- HSL
- Nike SecondarySecondary text
- HEX
- RGB
- HSL
- Nike MutedMuted text
- HEX
- RGB
- HSL
About Nike's colors
Nike's brand palette is fundamentally monochrome — black and white create maximum impact and versatility. Product colors and campaign-specific palettes provide variety, while the core brand remains unflinchingly bold and simple.
Black and white create maximum typographic impact for bold Nike headlines
Orange (#FA5400) serves as the primary energy accent for Nike.com
Product photography and seasonal campaigns inject all chromatic variety
Psychology
Black communicates power, determination, and athletic excellence. The stark contrast of black on white channels the intensity of competition. Minimal brand color lets athletes and products become the visual focus.
Evolution
Nike's visual identity has oscillated between color-rich campaigns and stark monochrome, but the core black-and-white foundation has been constant since the 1970s. The digital experience has settled into a clean, high-contrast system.
Where Nike uses each color
- Primary
Black (#111111) defines Nike's typographic power — oversized bold headlines, the Swoosh, and navigation.
- Secondary
Mid-gray (#757575) provides secondary information, sizing, and category navigation.
- Accent
Orange (#FA5400) drives urgency in CTAs and promotional elements on nike.com.
- Backgrounds
White backgrounds dominate product pages, while seasonal campaigns introduce full-bleed color backgrounds.
- Text
High-contrast black text with clear size hierarchy creates the bold, athletic editorial style Nike is known for.
- Semantic
Standard semantic colors handle cart, checkout, and e-commerce states, kept separate from brand expression.
Nike color questions
Hex codes, RGB values, neutrals and how to use the palette.
Nike's core brand colors are black (#111111) and white (#FFFFFF). The brand intentionally avoids a fixed accent color, allowing products and campaigns to introduce their own palettes. Orange (#FA5400) is commonly used on nike.com for CTAs.
Nike uses monochrome because it's universally bold, works across all product lines, and lets athletic imagery and product colors take center stage. The simplicity also reinforces Nike's 'Just Do It' directness.
Nike maintains strict brand guidelines internally, though they're not publicly available. The core principles are: bold typography (Futura/Nike proprietary fonts), high-contrast imagery, minimal color, and the Swoosh as the primary brand mark.
Nike's primary color is Nike Black, hex #111111 (RGB 17, 17, 17). It is the color used for the logo and the most prominent brand moments.
The secondary color is Nike Gray, #757575, and the accent is Nike Orange, #FA5400. Together with the primary they make up the three brand colors at the top of this page.
Nike uses #FFFFFF for backgrounds, #F5F5F5 for surfaces and #E5E5E5 for borders. Text runs #111111, #757575 and #999999 from strongest to most muted.
3 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 Nike's colors consistently when it generates UI.
Make something in the spirit of Nike
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.