Reebok color palette
FashionReebok's color identity centers on a bold, energetic red complemented by a clean, modern palette of white, black, and neutral grays. The brand's colors reflect its athletic heritage and contemporary style.
reebok.comReebok colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Reebok RedPrimary228, 29, 27
- Reebok WhiteSecondary255, 255, 255
- Reebok BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- Reebok Light GrayBackground247, 247, 247
- Reebok Surface GraySurface236, 236, 236
- Reebok Border GrayBorder217, 217, 217
Text
Three tiers of copy.- Reebok CharcoalText34, 34, 34
- Reebok Medium GraySecondary text102, 102, 102
- Reebok Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Reebok Success GreenSuccess60, 184, 120
- Reebok Warning OrangeWarning245, 166, 35
- Reebok Error RedError208, 2, 27
- Reebok Info BlueInfo20, 115, 230
Use Reebok's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
reebok-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1473E6;
--error: #D0021B;
--accent: #000000;
--border: #D9D9D9;
--primary: #E41D1B;
--success: #3CB878;
--surface: #ECECEC;
--warning: #F5A623;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
13.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Reebok gray and neutral colors
The quiet part of the Reebok palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Reebok Light GrayBackground
- HEX
- RGB
- HSL
- Reebok Surface GraySurface
- HEX
- RGB
- HSL
- Reebok Border GrayBorder
- HEX
- RGB
- HSL
- Reebok CharcoalText
- HEX
- RGB
- HSL
- Reebok Medium GraySecondary text
- HEX
- RGB
- HSL
- Reebok Muted GrayMuted text
- HEX
- RGB
- HSL
About Reebok's colors
Reebok's palette is anchored by a vivid red, balanced with neutral whites and grays for clarity and versatility. The use of black and accent colors provides contrast and supports clear communication.
Primary red contrasts with white for high visibility.
Neutral grays create depth and structure in UI.
Accent black is used for emphasis and branding.
Psychology
The primary red conveys energy, confidence, and action, aligning with Reebok's athletic focus. Neutral tones support a modern, approachable feel.
Evolution
Reebok's palette has remained consistent, with red as the signature color since the 1980s. Over time, the brand has refined its use of grays and black for a cleaner, more digital-friendly look.
Where Reebok uses each color
- Primary
Reebok Red is used for logos, call-to-action buttons, and key highlights on digital and physical assets.
- Secondary
Reebok White is the main background color for websites, packaging, and apparel.
- Accent
Reebok Black is used for text, icons, and certain logo applications.
- Backgrounds
Reebok Light Gray and Surface Gray appear in UI backgrounds, product pages, and overlays.
- Text
Charcoal and Medium Gray are used for primary and secondary text in digital interfaces.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for notifications, status indicators, and feedback messages.
Reebok color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Reebok primary color is #E41D1B, known as Reebok Red. This is used for logos and key brand highlights.
Reebok Red (#E41D1B) has an RGB value of 228, 29, 27 and a CMYK value of 0, 87, 88, 11. Use these for accurate color reproduction in print and digital.
Reebok uses several grays: Light Gray (#F7F7F7), Surface Gray (#ECECEC), Border Gray (#D9D9D9), Charcoal (#222222), Medium Gray (#666666), and Muted Gray (#999999). These provide structure and clarity in UI and communications.
Use Reebok Red (#E41D1B) for primary branding and calls-to-action, with white and grays for backgrounds and structure. Accent black and semantic colors should be reserved for emphasis, alerts, and status indicators.
The secondary color is Reebok White, #FFFFFF, and the accent is Reebok Black, #000000. Together with the primary they make up the three brand colors at the top of this page.
4 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 Reebok's colors consistently when it generates UI.
Make something in the spirit of Reebok
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.