Strava Summit color palette
SportsStrava Summit's color identity is defined by its distinctive, energetic orange, complemented by a clean white and a range of neutral grays for UI clarity. The palette emphasizes activity, motivation, and a modern digital experience.
strava.comStrava Summit colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Strava OrangePrimary252, 76, 2
- Summit WhiteSecondary255, 255, 255
- Summit GoldAccent247, 181, 0
Surfaces
Page, cards and dividers.- Summit Light GrayBackground247, 247, 248
- Summit Surface GraySurface237, 237, 237
- Summit Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Summit BlackText34, 34, 34
- Summit Dark GraySecondary text102, 102, 102
- Summit Muted GrayMuted text167, 167, 167
Semantic
Feedback and state colors.- Summit Success GreenSuccess76, 185, 68
- Summit Warning YellowWarning255, 179, 0
- Summit Error RedError224, 60, 49
- Summit Info BlueInfo0, 157, 220
Use Strava Summit's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
strava-summit-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009DDC;
--error: #E03C31;
--accent: #F7B500;
--border: #D1D1D1;
--primary: #FC4C02;
--success: #4CB944;
--surface: #EDEDED;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #A7A7A7;
--background: #F7F7F8;
--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.6: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.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Strava Summit gray and neutral colors
The quiet part of the Strava Summit palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Summit Light GrayBackground
- HEX
- RGB
- HSL
- Summit Surface GraySurface
- HEX
- RGB
- HSL
- Summit Border GrayBorder
- HEX
- RGB
- HSL
- Summit BlackText
- HEX
- RGB
- HSL
- Summit Dark GraySecondary text
- HEX
- RGB
- HSL
- Summit Muted GrayMuted text
- HEX
- RGB
- HSL
About Strava Summit's colors
Strava Summit's palette is built around a vibrant orange, conveying energy and action, balanced by whites and grays for clarity and usability. Accent colors provide clear semantic feedback for user interactions.
Primary orange dominates branding and CTAs.
Neutrals provide structure and readability.
Accent colors highlight statuses and feedback.
Psychology
Orange evokes enthusiasm, motivation, and movement, aligning with Strava's focus on athletic achievement. The supporting neutrals create a modern, approachable digital environment.
Evolution
Strava's palette has remained consistent, with orange as its core since inception. Minor adjustments to gray tones and accent colors have improved accessibility and digital clarity.
Where Strava Summit uses each color
- Primary
Strava Orange is used for primary buttons, navigation highlights, and key branding elements.
- Secondary
Summit White is the main background for app screens and web pages.
- Accent
Summit Gold is used for highlights, badges, and premium features.
- Backgrounds
Summit Light Gray provides subtle backgrounds for cards and UI sections.
- Text
Summit Black and Dark Gray are used for primary and secondary text throughout the interface.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
Strava Summit color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Strava Summit brand color is Strava Orange, hex code #FC4C02.
Strava Orange is RGB(252, 76, 2) and CMYK(0, 70, 99, 1). The hex code is #FC4C02.
Strava Summit uses Summit Light Gray (#F7F7F8), Summit Surface Gray (#EDEDED), and Summit Border Gray (#D1D1D1) for backgrounds and UI structure.
Use Strava Orange (#FC4C02) for primary actions and branding, neutrals for backgrounds and surfaces, and semantic colors for status indicators. Maintain high contrast for accessibility and clarity.
The secondary color is Summit White, #FFFFFF, and the accent is Summit 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 Summit's colors consistently when it generates UI.
Make something in the spirit of Strava Summit
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.