Peloton Bike color palette
ConsumerPeloton Bike's brand identity is defined by a bold, energetic red paired with deep black and crisp white, reflecting its premium, performance-driven ethos. The palette is designed for high contrast and clarity across digital and physical experiences.
onepeloton.comPeloton Bike colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Peloton RedPrimary226, 35, 26
- Peloton BlackSecondary17, 17, 17
- Peloton WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Peloton Light GrayBackground247, 247, 247
- Peloton Surface GraySurface250, 250, 250
- Peloton Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Peloton Text BlackText17, 17, 17
- Peloton Text GraySecondary text110, 110, 110
- Peloton Muted GrayMuted text160, 160, 160
Semantic
Feedback and state colors.- Peloton Success GreenSuccess60, 179, 113
- Peloton Warning OrangeWarning245, 166, 35
- Peloton Error RedError226, 35, 26
- Peloton Info BlueInfo20, 118, 251
Use Peloton Bike's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
peloton-bike-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1476FB;
--error: #E2231A;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #E2231A;
--success: #3CB371;
--surface: #FAFAFA;
--warning: #F5A623;
--secondary: #111111;
--text-muted: #A0A0A0;
--background: #F7F7F7;
--text-primary: #111111;
--text-secondary: #6E6E6E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.6:1
Pass
Text on surface
Needs 4.5:1 for body text
18.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8: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.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Peloton Bike gray and neutral colors
The quiet part of the Peloton Bike 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 Surface GraySurface
- HEX
- RGB
- HSL
- Peloton Border GrayBorder
- HEX
- RGB
- HSL
- Peloton Text BlackText
- HEX
- RGB
- HSL
- Peloton Text GraySecondary text
- HEX
- RGB
- HSL
- Peloton Muted GrayMuted text
- HEX
- RGB
- HSL
About Peloton Bike's colors
Peloton's palette is anchored by a signature red, contrasted with black and white for a modern, energetic look. The supporting grays and semantic colors provide clarity and accessibility in UI contexts.
Primary red is paired with deep black for strong contrast.
White and light grays are used for clean, open backgrounds.
Accent and semantic colors are used sparingly for clarity.
Psychology
Red conveys energy, motivation, and urgency, aligning with Peloton's active brand. Black and white reinforce a sense of premium quality and simplicity.
Evolution
Peloton's color palette has remained consistent since launch, with red as the core brand identifier. Minor adjustments to gray tones have improved accessibility and digital clarity.
Where Peloton Bike uses each color
- Primary
Peloton Red is used for the logo, primary action buttons, and key highlights across the website and app.
- Secondary
Peloton Black appears in navigation bars, text, and backgrounds for high contrast.
- Accent
Peloton White is used for backgrounds, negative space, and text on dark surfaces.
- Backgrounds
Peloton Light Gray and Surface Gray are used for page backgrounds and card surfaces in the app and website.
- Text
Text Black and Text Gray are used for primary and secondary text, ensuring readability.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
Peloton Bike color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Peloton Bike brand color is Peloton Red, hex #E2231A.
Peloton Red is RGB(226, 35, 26) and in CMYK it is approximately (0, 85, 88, 11).
Peloton uses several grays: Light Gray (#F7F7F7), Surface Gray (#FAFAFA), Border Gray (#E0E0E0), Text Gray (#6E6E6E), and Muted Gray (#A0A0A0) for UI backgrounds and text.
Use Peloton Red (#E2231A) for primary actions and highlights, with black and white for backgrounds and text. Grays provide structure, and semantic colors are reserved for status and alerts.
The secondary color is Peloton Black, #111111, and the accent is Peloton White, #FFFFFF. 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 Peloton Bike's colors consistently when it generates UI.
Make something in the spirit of Peloton Bike
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.