A high-energy action-sport palette built around GoPro’s signature electric blue-black identity, with a vivid cyan accent for motion and a sharp orange signal color for urgency and highlights. The system feels fast, technical, and outdoor-ready while staying disciplined enough for product UI and bold
A high-energy action-sport palette built around GoPro’s signature electric blue-black identity, with a vivid cyan accent for motion and a sharp orange signal color for urgency and highlights. The system feels fast, technical, and outdoor-ready while staying disciplined enough for product UI and bold
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors center on GoPro’s recognizable electric blue and its darker anchor, then introduce a precise signal accent to keep the system active and unmistakably action-oriented. Together they create a compact, high-recognition palette:
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors center on GoPro’s recognizable electric blue and its darker anchor, then introduce a precise signal accent to keep the system active and unmistakably action-oriented. Together they create a compact, high-recognition palette:
RolesLogo, Btn Primary Bg, Headline
The signature brand blue delivers instant recognition and a crisp, motion-led feel that reads as modern and camera-centric.
#00A3E00, 163, 224196, 100, 44100, 27, 0, 12RolesLink, Btn Secondary Bg
A near-black blue that stabilizes the palette, supports premium contrast, and keeps the interface grounded.
#0B1F3311, 31, 51210, 65, 1278, 39, 0, 80RolesBtn Outlined Border, Btn Outlined Text
A sharp accent that adds urgency and visibility for outlines, callouts, and action cues without overpowering the core brand blue.
#FF5A1F255, 90, 3116, 100, 560, 65, 88, 0The support colors extend the main palette with restrained utility tones that improve readability, interaction states, and visual breathing room.
RolesIcon, Border
A lighter technical cyan that echoes the primary blue and gives icons and borders a clean, energetic lift.
#4EC8F578, 200, 245196, 89, 6368, 18, 0, 4RolesDivider, Outline
A muted cool slate that quiets interface separators and structural lines while staying compatible with the brand’s blue-black core.
#7A8A9A122, 138, 154210, 14, 5421, 10, 0, 40Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F7FA244, 247, 250210, 37, 972, 1, 0, 2RolesBg Dark, Text, Btn Primary Text
#09111A9, 17, 26212, 49, 765, 35, 0, 90Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-gopro-blue: #00A3E0;
--color-deep-carbon: #0B1F33;
--color-pulse-orange: #FF5A1F;
--color-signal-cyan: #4EC8F5;
--color-steel-slate: #7A8A9A;
--color-pure-white: #FFFFFF;
--color-mist-white: #F4F7FA;
--color-true-ink: #09111A;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #00A3E0;
--role-btn-primary-bg: #00A3E0;
--role-headline: #00A3E0;
--role-link: #0B1F33;
--role-btn-secondary-bg: #0B1F33;
--role-btn-outlined-border: #FF5A1F;
--role-btn-outlined-text: #FF5A1F;
--role-icon: #4EC8F5;
--role-border: #4EC8F5;
--role-divider: #7A8A9A;
--role-outline: #7A8A9A;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #09111A;
--role-text: #09111A;
--role-btn-primary-text: #09111A;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"gopro-blue": "#00A3E0",
"deep-carbon": "#0B1F33",
"pulse-orange": "#FF5A1F",
"signal-cyan": "#4EC8F5",
"steel-slate": "#7A8A9A",
"pure-white": "#FFFFFF",
"mist-white": "#F4F7FA",
"true-ink": "#09111A"
}