GoPro Blue#00A3E0
Deep Carbon#0B1F33
Pulse Orange#FF5A1F
Signal Cyan#4EC8F5
Steel Slate#7A8A9A
Palette direction

Gopro Inspired Action Color Palette

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

ComplementaryTechgopro-inspiredaction sportscamera techoutdoor
palette-preview.example
Tech color direction

Gopro Inspired Action Color Palette

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 system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Pure White #FFFFFFon Deep Carbon #0B1F3316.7:1 Excellent
Logo True Ink #09111Aon GoPro Blue #00A3E06.6:1 Strong
Logo True Ink #09111Aon Pulse Orange #FF5A1F6.1:1 Strong
Logo True Ink #09111Aon Pure White #FFFFFF19.0:1 Excellent
Icon color
BackgroundGoPro Blue#00A3E0TextTrue Ink#09111A
Primary Button6.61:1
AA

Best for the main action users should notice first.

BackgroundDeep Carbon#0B1F33TextPure White#FFFFFF
Secondary Button16.69:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextPulse Orange#FF5A1F
Outlined Button3.12:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextDeep Carbon#0B1F33
Text Button16.69:1
AAA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsComplementary color relationship
9:41Gopro Inspired Action Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CGopro Inspired Action Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color 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:

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.GoPro Blue #00A3E0
HeadlineUsed for main titles and key messages.GoPro Blue #00A3E0
LinkUsed for links and interactive text.Deep Carbon #0B1F33

Buttons

Primary Button
BackgroundGoPro Blue #00A3E0
TextTrue Ink #09111A
Secondary Button
BackgroundDeep Carbon #0B1F33
TextPure White #FFFFFF
Outlined Button
BackgroundPulse Orange #FF5A1F
TextPulse Orange #FF5A1F

Interface

TextDefault readable body text.True Ink #09111A
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.True Ink #09111A
IconSmall interface icons and marks.Signal Cyan #4EC8F5
BorderCards, inputs, and component borders.Signal Cyan #4EC8F5
DividerSubtle separators between content.Steel Slate #7A8A9A
OutlineFocus rings and emphasis outlines.Steel Slate #7A8A9A

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

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:

PrimaryGoPro Blue

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.

HEX#00A3E0
RGB0, 163, 224
HSL196, 100, 44
CMYK100, 27, 0, 12
SecondaryDeep Carbon

RolesLink, Btn Secondary Bg

A near-black blue that stabilizes the palette, supports premium contrast, and keeps the interface grounded.

HEX#0B1F33
RGB11, 31, 51
HSL210, 65, 12
CMYK78, 39, 0, 80
TertiaryPulse Orange

RolesBtn 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.

HEX#FF5A1F
RGB255, 90, 31
HSL16, 100, 56
CMYK0, 65, 88, 0

Support Colors

The support colors extend the main palette with restrained utility tones that improve readability, interaction states, and visual breathing room.

Signal Cyan

RolesIcon, Border

A lighter technical cyan that echoes the primary blue and gives icons and borders a clean, energetic lift.

HEX#4EC8F5
RGB78, 200, 245
HSL196, 89, 63
CMYK68, 18, 0, 4
Steel Slate

RolesDivider, Outline

A muted cool slate that quiets interface separators and structural lines while staying compatible with the brand’s blue-black core.

HEX#7A8A9A
RGB122, 138, 154
HSL210, 14, 54
CMYK21, 10, 0, 40

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Mist White
HEX#F4F7FA
RGB244, 247, 250
HSL210, 37, 97
CMYK2, 1, 0, 2
True Ink

RolesBg Dark, Text, Btn Primary Text

HEX#09111A
RGB9, 17, 26
HSL212, 49, 7
CMYK65, 35, 0, 90

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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;
}

Role tokens

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;
}

JSON

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"
}
Press Space to load new palette