Garmin color palette
TechGarmin's color identity is defined by a stark black primary, complemented by cool blues and a range of functional grays. The palette is utilitarian, reflecting the brand's focus on precision technology and clarity in navigation.
garmin.comGarmin colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Garmin BlackPrimary0, 0, 0
- Garmin BlueSecondary0, 124, 195
- Garmin Accent BlueAccent0, 173, 239
Surfaces
Page, cards and dividers.- Garmin Light GrayBackground245, 247, 250
- Garmin WhiteSurface255, 255, 255
- Garmin Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Garmin CharcoalText35, 35, 35
- Garmin Medium GraySecondary text90, 90, 90
- Garmin Muted GrayMuted text138, 138, 138
Semantic
Feedback and state colors.- Garmin Success GreenSuccess75, 181, 67
- Garmin Warning YellowWarning255, 180, 0
- Garmin Error RedError215, 38, 61
- Garmin Info BlueInfo0, 173, 239
Use Garmin's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
garmin-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00ADEF;
--error: #D7263D;
--accent: #00ADEF;
--border: #D1D5DB;
--primary: #000000;
--success: #4BB543;
--surface: #FFFFFF;
--warning: #FFB400;
--secondary: #007CC3;
--text-muted: #8A8A8A;
--background: #F5F7FA;
--text-primary: #232323;
--text-secondary: #5A5A5A;
}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.6:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.2:1
Pass
Muted text on surface
Needs 3:1 for large text
3.5:1
Pass
Garmin background, border and text colors
The quiet part of the Garmin palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Garmin Light GrayBackground
- HEX
- RGB
- HSL
- Garmin WhiteSurface
- HEX
- RGB
- HSL
- Garmin Border GrayBorder
- HEX
- RGB
- HSL
- Garmin CharcoalText
- HEX
- RGB
- HSL
- Garmin Medium GraySecondary text
- HEX
- RGB
- HSL
- Garmin Muted GrayMuted text
- HEX
- RGB
- HSL
About Garmin's colors
Garmin's palette uses a high-contrast black and blue scheme, accented by functional grays and clear semantic colors. The approach emphasizes clarity, reliability, and technological precision.
Primary black anchors the brand and contrasts with blue accents.
Grays are used for UI structure and readability.
Semantic colors (green, yellow, red) provide clear status feedback.
Psychology
Black conveys authority, sophistication, and seriousness, while blue signals trust and dependability. The minimal use of color reinforces Garmin's focus on function and clarity.
Evolution
Garmin's palette has remained stable, with black and blue as core elements since its early brand identity. Minor adjustments have been made to gray tones and accent blues for digital clarity.
Where Garmin uses each color
- Primary
Garmin Black is used in the logo, main navigation, and key product packaging.
- Secondary
Garmin Blue appears in call-to-action buttons, highlights, and navigation elements.
- Accent
Garmin Accent Blue is used for links, icons, and interactive UI elements.
- Backgrounds
Garmin Light Gray and White are used for app backgrounds and web page surfaces.
- Text
Charcoal, Medium Gray, and Muted Gray are used for primary, secondary, and muted text respectively.
- Semantic
Success Green, Warning Yellow, and Error Red are used for status indicators, alerts, and notifications.
Garmin color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Garmin primary color hex code is #000000. This color is used for the logo and key brand elements.
Garmin Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100). These values ensure consistent reproduction across print and digital.
Garmin uses several grays: Garmin Light Gray (#F5F7FA), Border Gray (#D1D5DB), Medium Gray (#5A5A5A), and Muted Gray (#8A8A8A). These provide structure and hierarchy in interfaces.
Use Garmin Black (#000000) for primary branding, Garmin Blue (#007CC3) for key actions, and grays for backgrounds and text. Semantic colors should be reserved for status and feedback elements.
The secondary color is Garmin Blue, #007CC3, and the accent is Garmin Accent Blue, #00ADEF. Together with the primary they make up the three brand colors at the top of this page.
6 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 Garmin's colors consistently when it generates UI.
Make something in the spirit of Garmin
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.