Fitbit Sense color palette
ConsumerFitbit Sense uses a clean, modern color palette centered on its signature teal, supported by cool grays and subtle accent colors for clarity and wellness focus. The palette is designed for digital interfaces and wearable device displays, emphasizing readability and calmness.
fitbit.comFitbit Sense colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Fitbit TealPrimary0, 176, 185
- Fitbit CharcoalSecondary75, 75, 75
- Fitbit YellowAccent255, 211, 0
Surfaces
Page, cards and dividers.- Fitbit WhiteBackground255, 255, 255
- Fitbit Light GraySurface247, 247, 247
- Fitbit Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Fitbit BlackText33, 33, 33
- Fitbit Medium GraySecondary text117, 117, 117
- Fitbit Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Fitbit Success GreenSuccess67, 214, 117
- Fitbit Warning OrangeWarning255, 179, 0
- Fitbit Error RedError229, 57, 53
- Fitbit Info BlueInfo25, 118, 210
Use Fitbit Sense's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
fitbit-sense-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #E53935;
--accent: #FFD300;
--border: #E0E0E0;
--primary: #00B0B9;
--success: #43D675;
--surface: #F7F7F7;
--warning: #FFB300;
--secondary: #4B4B4B;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #212121;
--text-secondary: #757575;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
Fitbit Sense gray and neutral colors
The quiet part of the Fitbit Sense 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 Sense's colors
Fitbit Sense's palette is built around a calming teal, complemented by neutral grays and vibrant accents for clarity and accessibility. The scheme supports a health-focused, modern digital experience.
Primary teal contrasts with white and dark grays for legibility.
Accent yellow is used sparingly for highlights and notifications.
Semantic colors (green, orange, red, blue) provide clear status feedback.
Psychology
Teal evokes calm, trust, and wellness, aligning with Fitbit's health mission. The neutral grays support a sense of clarity and professionalism.
Evolution
Fitbit's color palette has remained consistent since its rebrand in the late 2010s, with teal as the anchor. Minor adjustments to accent and semantic colors have improved accessibility and digital clarity.
Where Fitbit Sense uses each color
- Primary
Fitbit Teal appears in app headers, primary buttons, and device highlights.
- Secondary
Fitbit Charcoal is used for navigation bars, icons, and secondary text.
- Accent
Fitbit Yellow is reserved for notification badges and call-to-action highlights.
- Backgrounds
Fitbit White and Light Gray are used for app backgrounds and card surfaces.
- Text
Fitbit Black and Medium Gray are used for primary and secondary text throughout the UI.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for status indicators and alerts.
Fitbit Sense color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Fitbit Sense brand color is Fitbit Teal, hex code #00B0B9. This color is used as the primary brand identifier.
Fitbit Teal (#00B0B9) in RGB is (0, 176, 185). For CMYK, it is approximately (100, 5, 0, 27).
Fitbit uses several grays: Charcoal (#4B4B4B), Medium Gray (#757575), Muted Gray (#BDBDBD), and Light Gray (#F7F7F7). These are used for backgrounds, borders, and text to ensure readability.
Use Fitbit Teal for primary actions and branding, grays for backgrounds and text, and semantic colors for status indicators. Accent colors like Fitbit Yellow should be used sparingly for emphasis.
The secondary color is Fitbit Charcoal, #4B4B4B, and the accent is Fitbit Yellow, #FFD300. Together with the primary they make up the three brand colors at the top of this page.
3 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 Sense's colors consistently when it generates UI.
Make something in the spirit of Fitbit Sense
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.