Strava color palette
SocialStrava's color identity is defined by its signature vivid orange, supported by a minimal palette of grayscale neutrals and white. The palette is designed for high visibility and energetic contrast, reflecting the brand's focus on athleticism and community.
strava.comStrava colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Strava OrangePrimary252, 76, 2
- Strava WhiteSecondary255, 255, 255
- Segment GoldAccent247, 181, 0
Surfaces
Page, cards and dividers.- Dashboard Light GrayBackground247, 247, 247
- Panel WhiteSurface255, 255, 255
- UI Border GrayBorder230, 230, 230
Text
Three tiers of copy.- Strava CharcoalText34, 34, 34
- Muted GraySecondary text102, 102, 102
- Subtle GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Segment GreenSuccess60, 179, 113
- Alert YellowWarning255, 179, 0
- Error RedError224, 60, 49
- Info BlueInfo25, 118, 210
Use Strava's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
strava-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #E03C31;
--accent: #F7B500;
--border: #E6E6E6;
--primary: #FC4C02;
--success: #3CB371;
--surface: #FFFFFF;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--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
15.9: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
5.7: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
Strava gray and neutral colors
The quiet part of the Strava palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Dashboard Light GrayBackground
- HEX
- RGB
- HSL
- Panel WhiteSurface
- HEX
- RGB
- HSL
- UI Border GrayBorder
- HEX
- RGB
- HSL
- Strava CharcoalText
- HEX
- RGB
- HSL
- Muted GraySecondary text
- HEX
- RGB
- HSL
- Subtle GrayMuted text
- HEX
- RGB
- HSL
About Strava's colors
Strava's palette is built around a bold, high-visibility orange, contrasted with clean whites and functional grays. The accent and semantic colors provide clarity and support for UI feedback and highlights.
Primary orange is complemented by neutral grays and whites.
Accent gold and green are used for achievements and success states.
Red and blue support error and informational messaging.
Psychology
The energetic orange conveys activity, motivation, and community spirit. Neutral tones provide clarity and keep the focus on user content and achievements.
Evolution
Strava's palette has remained consistent since its early years, with orange as the unmistakable core. Minor adjustments to gray tones and accent colors have been made to improve accessibility and UI clarity.
Where Strava uses each color
- Primary
Strava Orange is used for the logo, primary buttons, and key highlights throughout the app and website.
- Secondary
Strava White serves as the main background for pages and cards, ensuring content readability.
- Accent
Segment Gold is used for segment leaderboards, achievements, and special highlights.
- Backgrounds
Dashboard Light Gray is the default background for app screens and web dashboards.
- Text
Strava Charcoal and Muted Gray are used for primary and secondary text, ensuring strong contrast and legibility.
- Semantic
Segment Green, Alert Yellow, Error Red, and Info Blue are used for success, warning, error, and informational states in the UI.
Strava color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Strava primary color is #FC4C02, known as Strava Orange. This color is used for the logo and primary actions.
Strava Orange (#FC4C02) in RGB is (252, 76, 2). In CMYK, it is approximately (0, 70, 99, 1).
Strava uses Dashboard Light Gray (#F7F7F7), UI Border Gray (#E6E6E6), and Charcoal (#222222) for backgrounds, borders, and text. These neutrals provide clarity and contrast against the vivid orange.
Strava Orange (#FC4C02) should be reserved for primary actions and highlights, while grays and whites form the UI foundation. Accent and semantic colors are used sparingly for feedback and achievements.
The secondary color is Strava White, #FFFFFF, and the accent is Segment Gold, #F7B500. 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 Strava's colors consistently when it generates UI.
Make something in the spirit of Strava
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.