Fitbit color palette
SportsFitbit's color identity centers on a vibrant teal, complemented by cool grays and subtle accent hues for a clean, modern look. The palette is designed for clarity and energy across digital and physical experiences.
fitbit.comFitbit colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Fitbit TealPrimary0, 176, 185
- Fitbit CharcoalSecondary74, 74, 74
- Fitbit Aqua AccentAccent126, 230, 230
Surfaces
Page, cards and dividers.- Fitbit WhiteBackground255, 255, 255
- Fitbit Light GraySurface246, 247, 249
- Fitbit Border GrayBorder226, 229, 234
Text
Three tiers of copy.- Fitbit BlackText24, 24, 24
- Fitbit Medium GraySecondary text107, 107, 107
- Fitbit Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Fitbit Success GreenSuccess67, 214, 117
- Fitbit Warning YellowWarning255, 198, 0
- Fitbit Error RedError248, 60, 60
- Fitbit Info TealInfo0, 176, 185
Use Fitbit's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
fitbit-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B0B9;
--error: #F83C3C;
--accent: #7EE6E6;
--border: #E2E5EA;
--primary: #00B0B9;
--success: #43D675;
--surface: #F6F7F9;
--warning: #FFC600;
--secondary: #4A4A4A;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #181818;
--text-secondary: #6B6B6B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.8:1
Pass
Text on surface
Needs 4.5:1 for body text
16.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.0:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Fitbit background, border and text colors
The quiet part of the Fitbit palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Fitbit WhiteBackground
- HEX
- RGB
- HSL
- Fitbit Light GraySurface
- HEX
- RGB
- HSL
- Fitbit Border GrayBorder
- HEX
- RGB
- HSL
- Fitbit BlackText
- HEX
- RGB
- HSL
- Fitbit Medium GraySecondary text
- HEX
- RGB
- HSL
- Fitbit Muted GrayMuted text
- HEX
- RGB
- HSL
About Fitbit's colors
Fitbit's palette uses a dominant teal to evoke energy and health, balanced by neutral grays for readability and a modern feel. Accent colors provide clarity for status and interaction cues.
Primary teal is paired with dark and light neutrals for contrast.
Accent aqua highlights interactive elements.
Semantic colors (green, yellow, red) are reserved for status and feedback.
Psychology
The teal primary conveys freshness, vitality, and trust, aligning with Fitbit's health-focused mission. Neutrals ensure the interface feels approachable and uncluttered.
Evolution
Fitbit's core teal has remained consistent since its early branding, with minor adjustments to supporting grays for improved accessibility. The palette has been stable, focusing on clarity and digital usability.
Where Fitbit uses each color
- Primary
Fitbit Teal is used for main navigation bars, primary buttons, and key brand marks.
- Secondary
Fitbit Charcoal appears in headers, footers, and secondary UI elements.
- Accent
Fitbit Aqua Accent highlights active states, toggles, and interactive icons.
- Backgrounds
Fitbit White and Light Gray are used for app backgrounds, cards, and device screens.
- Text
Fitbit Black and Medium Gray are used for primary and secondary text throughout the UI.
- Semantic
Success Green, Warning Yellow, and Error Red are used for notifications, progress, and alerts.
Fitbit color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Fitbit primary color hex code is #00B0B9. This teal is used prominently in branding and UI.
Fitbit Teal (#00B0B9) has an RGB value of (0, 176, 185) and a CMYK value of (100, 5, 0, 27). These values ensure color consistency across print and digital.
Fitbit uses several grays, including Charcoal (#4A4A4A), Medium Gray (#6B6B6B), Muted Gray (#A3A3A3), and Light Gray (#F6F7F9), for backgrounds, text, and borders. These neutrals provide contrast and readability.
Use Fitbit Teal (#00B0B9) for primary actions and branding, with grays for backgrounds and text. Accent and semantic colors should be reserved for interactive elements and status indicators.
The secondary color is Fitbit Charcoal, #4A4A4A, and the accent is Fitbit Aqua Accent, #7EE6E6. 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 Fitbit's colors consistently when it generates UI.
Make something in the spirit of Fitbit
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.