Peloton color palette
SportsPeloton's color identity is built around a strong, modern black with vibrant red accents, reflecting energy and sophistication. The palette uses deep neutrals and bold highlights for a premium, athletic feel.
onepeloton.comPeloton colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Peloton BlackPrimary24, 26, 29
- Peloton RedSecondary230, 0, 31
- Peloton WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Peloton Light GrayBackground247, 247, 248
- Peloton Dark GraySurface35, 36, 39
- Peloton Border GrayBorder209, 209, 214
Text
Three tiers of copy.- Peloton Black TextText24, 26, 29
- Peloton Secondary GraySecondary text110, 110, 115
- Peloton Muted GrayMuted text161, 161, 166
Semantic
Feedback and state colors.- Peloton Success GreenSuccess0, 177, 114
- Peloton Warning YellowWarning255, 184, 0
- Peloton RedError230, 0, 31
- Peloton Info BlueInfo0, 113, 227
Use Peloton's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
peloton-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0071E3;
--error: #E6001F;
--accent: #FFFFFF;
--border: #D1D1D6;
--primary: #181A1D;
--success: #00B172;
--surface: #232427;
--warning: #FFB800;
--secondary: #E6001F;
--text-muted: #A1A1A6;
--background: #F7F7F8;
--text-primary: #181A1D;
--text-secondary: #6E6E73;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
1.1:1
Fail
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
3.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
6.0:1
Pass
Peloton gray and neutral colors
The quiet part of the Peloton palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Peloton Light GrayBackground
- HEX
- RGB
- HSL
- Peloton Dark GraySurface
- HEX
- RGB
- HSL
- Peloton Border GrayBorder
- HEX
- RGB
- HSL
- Peloton Black TextText
- HEX
- RGB
- HSL
- Peloton Secondary GraySecondary text
- HEX
- RGB
- HSL
- Peloton Muted GrayMuted text
- HEX
- RGB
- HSL
About Peloton's colors
Peloton's palette leverages high-contrast black and white with a signature red for energy and urgency. Neutrals support clarity and accessibility across digital and physical touchpoints.
Primary black anchors the brand and UI.
Red is used for calls to action and highlights.
Grays provide structure and hierarchy.
Psychology
The dominant black conveys strength, reliability, and focus, while the red accent energizes and motivates. The neutral grays ensure a balanced, approachable interface.
Evolution
Peloton's palette has remained stable, with black and red as core elements since launch. Minor adjustments to gray tones and accent colors have improved accessibility and digital clarity.
Where Peloton uses each color
- Primary
Used for navigation bars, app backgrounds, and key brand elements.
- Secondary
Appears on buttons, highlights, and promotional graphics.
- Accent
Used for text, icons, and backgrounds to provide contrast.
- Backgrounds
Light gray backgrounds are common in app screens and web sections.
- Text
Primary black and secondary gray are used for main and supporting text.
- Semantic
Green, yellow, and blue are used for status, alerts, and informational messaging.
Peloton color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Peloton primary color hex code is #181A1D. This deep black is central to the brand's identity.
Peloton Black (#181A1D) is RGB(24, 26, 29) and CMYK(17, 10, 0, 89). Use these values for accurate color reproduction.
Peloton uses a range of grays including #232427 (Dark Gray), #D1D1D6 (Border Gray), #6E6E73 (Secondary Gray), and #A1A1A6 (Muted Gray). These support UI structure and readability.
Use #181A1D for primary backgrounds and navigation, #E6001F for actions and highlights, and grays for surfaces and text. Maintain high contrast for accessibility and brand consistency.
The secondary color is Peloton Red, #E6001F, and the accent is Peloton White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
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 Peloton's colors consistently when it generates UI.
Make something in the spirit of Peloton
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.