WHOOP color palette
SportsWHOOP's color identity is centered around a distinctive green paired with deep black and neutral grays, reflecting its focus on performance and data-driven insights. The palette is minimal, modern, and optimized for clarity in digital interfaces.
whoop.comWHOOP colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- WHOOP GreenPrimary0, 229, 153
- WHOOP BlackSecondary17, 17, 17
- WHOOP Deep GreenAccent0, 179, 124
Surfaces
Page, cards and dividers.- WHOOP CharcoalBackground24, 24, 24
- WHOOP Surface GraySurface35, 35, 35
- WHOOP Border GrayBorder49, 49, 49
Text
Three tiers of copy.- WHOOP WhiteText255, 255, 255
- WHOOP Light GraySecondary text179, 179, 179
- WHOOP Muted GrayMuted text106, 106, 106
Semantic
Feedback and state colors.- WHOOP Success GreenSuccess0, 229, 153
- WHOOP Warning YellowWarning255, 214, 0
- WHOOP Error RedError255, 59, 48
- WHOOP Info BlueInfo0, 153, 255
Use WHOOP's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
whoop-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099FF;
--error: #FF3B30;
--accent: #00B37C;
--border: #313131;
--primary: #00E599;
--success: #00E599;
--surface: #232323;
--warning: #FFD600;
--secondary: #111111;
--text-muted: #6A6A6A;
--background: #181818;
--text-primary: #FFFFFF;
--text-secondary: #B3B3B3;
}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
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
WHOOP gray, dark and neutral colors
WHOOP runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- WHOOP CharcoalBackground
- HEX
- RGB
- HSL
- WHOOP Surface GraySurface
- HEX
- RGB
- HSL
- WHOOP Border GrayBorder
- HEX
- RGB
- HSL
- WHOOP WhiteText
- HEX
- RGB
- HSL
- WHOOP Light GraySecondary text
- HEX
- RGB
- HSL
- WHOOP Muted GrayMuted text
- HEX
- RGB
- HSL
About WHOOP's colors
WHOOP's palette uses a vibrant green to signal energy and health, contrasted with deep blacks and grays for a data-driven, high-tech feel. The minimal use of color ensures clarity and focus on key metrics.
Primary green is used for highlights and calls to action.
Dark neutrals dominate backgrounds and surfaces.
Accent colors are reserved for semantic feedback and status.
Psychology
Green conveys vitality, growth, and optimal performance, aligning with WHOOP's fitness focus. Black and gray tones communicate seriousness, precision, and reliability.
Evolution
WHOOP's palette has remained consistent since its inception, with the green and black combination becoming a recognizable signature. Minor adjustments to gray values have improved accessibility and contrast.
Where WHOOP uses each color
- Primary
WHOOP Green is used for primary buttons, highlights, and key metrics in the app.
- Secondary
WHOOP Black is the main color for navigation bars, app backgrounds, and packaging.
- Accent
WHOOP Deep Green is used for hover states, secondary actions, and subtle highlights.
- Backgrounds
WHOOP Charcoal and Surface Gray are used for app screens, dashboards, and device UI.
- Text
WHOOP White and Light Gray are used for primary and secondary text, ensuring legibility on dark backgrounds.
- Semantic
Success, warning, error, and info colors are used for status indicators, notifications, and feedback messages.
WHOOP color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official WHOOP brand color is WHOOP Green, hex code #00E599.
WHOOP Green (#00E599) in RGB is (0, 229, 153); in CMYK it is (100, 0, 33, 10).
WHOOP uses deep neutrals like WHOOP Black (#111111), Charcoal (#181818), and Surface Gray (#232323) throughout its UI for backgrounds and surfaces.
Use WHOOP Green (#00E599) for primary actions and highlights, with dark neutrals for backgrounds and surfaces. Semantic colors are reserved for status and feedback elements.
The secondary color is WHOOP Black, #111111, and the accent is WHOOP Deep Green, #00B37C. Together with the primary they make up the three brand colors at the top of this page.
5 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 WHOOP's colors consistently when it generates UI.
Make something in the spirit of WHOOP
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.