GoPro color palette
TechGoPro's color identity is defined by its signature blue, paired with strong black, white, and gray neutrals for a bold, high-contrast look. The palette emphasizes action, clarity, and modernity across digital and physical touchpoints.
gopro.comGoPro colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- GoPro BluePrimary0, 174, 239
- GoPro BlackSecondary35, 31, 32
- GoPro WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- GoPro Light GrayBackground246, 246, 246
- GoPro Surface GraySurface233, 233, 233
- GoPro Border GrayBorder209, 211, 212
Text
Three tiers of copy.- GoPro Black TextText35, 31, 32
- GoPro Medium Gray TextSecondary text100, 100, 100
- GoPro Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- GoPro Success GreenSuccess0, 177, 64
- GoPro Warning YellowWarning255, 194, 14
- GoPro Error RedError237, 28, 36
- GoPro Blue InfoInfo0, 174, 239
Use GoPro's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
gopro-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEEF;
--error: #ED1C24;
--accent: #FFFFFF;
--border: #D1D3D4;
--primary: #00AEEF;
--success: #00B140;
--surface: #E9E9E9;
--warning: #FFC20E;
--secondary: #231F20;
--text-muted: #A7A9AC;
--background: #F6F6F6;
--text-primary: #231F20;
--text-secondary: #646464;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.1:1
Pass
Text on surface
Needs 4.5:1 for body text
13.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.5: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
1.9:1
Fail
GoPro gray and neutral colors
The quiet part of the GoPro palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- GoPro Light GrayBackground
- HEX
- RGB
- HSL
- GoPro Surface GraySurface
- HEX
- RGB
- HSL
- GoPro Border GrayBorder
- HEX
- RGB
- HSL
- GoPro Black TextText
- HEX
- RGB
- HSL
- GoPro Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- GoPro Muted GrayMuted text
- HEX
- RGB
- HSL
About GoPro's colors
GoPro's palette centers on a vibrant blue, contrasted with deep black and crisp white, creating a dynamic and energetic visual language. The supporting grays provide balance and clarity in UI and product design.
Primary blue is complemented by black and white for strong contrast.
Grays are used to structure UI and provide visual hierarchy.
Accent colors (green, yellow, red) are reserved for semantic feedback.
Psychology
The blue evokes trust, adventure, and technology, aligning with GoPro's action-oriented brand. Black and white reinforce clarity, boldness, and simplicity.
Evolution
GoPro's palette has remained consistent since its inception, with blue, black, and white as core elements. Minor adjustments to gray tones have been made for improved digital accessibility.
Where GoPro uses each color
- Primary
GoPro Blue is used for buttons, highlights, and key brand elements across web and packaging.
- Secondary
GoPro Black appears in navigation bars, product backgrounds, and logo lockups.
- Accent
GoPro White is used for text, backgrounds, and logo contrast.
- Backgrounds
Light and surface grays are used for page backgrounds and UI surfaces.
- Text
Black and medium gray are used for primary and secondary text, respectively.
- Semantic
Green, yellow, and red are used for success, warning, and error states in digital interfaces.
GoPro color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official GoPro brand blue is #00AEEF. This color is used as the primary brand identifier.
GoPro Blue (#00AEEF) is RGB(0, 174, 239) and CMYK(100, 0, 0, 6). These values ensure accurate reproduction across media.
GoPro uses a range of grays: Light Gray (#F6F6F6), Surface Gray (#E9E9E9), Border Gray (#D1D3D4), Medium Gray Text (#646464), and Muted Gray (#A7A9AC). These neutrals provide structure and readability in UI design.
Use GoPro Blue (#00AEEF) for primary actions and highlights, with black and white for contrast and clarity. Grays structure backgrounds and surfaces, while semantic colors are reserved for feedback and status indicators.
The secondary color is GoPro Black, #231F20, and the accent is GoPro 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 GoPro's colors consistently when it generates UI.
Make something in the spirit of GoPro
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.