WhatsApp color palette
SocialWhatsApp's color identity centers on its distinctive green, complemented by white, dark gray, and subtle accent tones for a clean, modern interface. The palette is consistent across app, web, and marketing materials.
whatsapp.comWhatsApp colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- WhatsApp GreenPrimary37, 211, 102
- WhatsApp TealSecondary7, 94, 84
- WhatsApp Accent GreenAccent18, 140, 126
Surfaces
Page, cards and dividers.- WhatsApp WhiteBackground255, 255, 255
- WhatsApp Light GraySurface236, 229, 221
- WhatsApp Border GrayBorder209, 215, 219
Text
Three tiers of copy.- WhatsApp Dark TextText17, 27, 33
- WhatsApp Secondary TextSecondary text102, 119, 129
- WhatsApp Muted TextMuted text134, 150, 160
Semantic
Feedback and state colors.- WhatsApp Success GreenSuccess37, 211, 102
- WhatsApp Warning YellowWarning255, 185, 0
- WhatsApp Error RedError234, 0, 56
- WhatsApp Info BlueInfo52, 183, 241
Use WhatsApp's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
whatsapp-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #34B7F1;
--error: #EA0038;
--accent: #128C7E;
--border: #D1D7DB;
--primary: #25D366;
--success: #25D366;
--surface: #ECE5DD;
--warning: #FFB900;
--secondary: #075E54;
--text-muted: #8696A0;
--background: #FFFFFF;
--text-primary: #111B21;
--text-secondary: #667781;
}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.5:1
Pass
Text on surface
Needs 4.5:1 for body text
14.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
3.7:1
Fail
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
WhatsApp background, border and text colors
The quiet part of the WhatsApp palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- WhatsApp WhiteBackground
- HEX
- RGB
- HSL
- WhatsApp Light GraySurface
- HEX
- RGB
- HSL
- WhatsApp Border GrayBorder
- HEX
- RGB
- HSL
- WhatsApp Dark TextText
- HEX
- RGB
- HSL
- WhatsApp Secondary TextSecondary text
- HEX
- RGB
- HSL
- WhatsApp Muted TextMuted text
- HEX
- RGB
- HSL
About WhatsApp's colors
WhatsApp's palette is built around a vibrant green that symbolizes approachability and trust, balanced by neutral backgrounds and dark UI elements for readability. The use of consistent accent and semantic colors ensures clarity and accessibility.
Primary green paired with deep teal for brand recognition.
Neutral grays and white provide contrast and focus.
Accent and semantic colors highlight key actions and statuses.
Psychology
Green conveys safety, growth, and communication, aligning with WhatsApp's mission of connecting people. The neutral and dark tones support a calm, focused user experience.
Evolution
WhatsApp's color palette has remained highly consistent since its early years, with minor refinements to green and gray tones for digital clarity. The brand has prioritized accessibility and subtlety over dramatic color changes.
Where WhatsApp uses each color
- Primary
Used for the app icon, main action buttons, and highlights in navigation.
- Secondary
Appears in headers, chat bubbles, and secondary buttons.
- Accent
Used for selected states, icons, and active elements.
- Backgrounds
White and light gray are used for chat backgrounds and main app surfaces.
- Text
Dark and muted grays are used for primary, secondary, and muted text throughout the UI.
- Semantic
Success, warning, error, and info colors are used for status indicators and notifications.
WhatsApp color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official WhatsApp primary color hex code is #25D366. This green is used across the brand's main assets and UI.
WhatsApp Green (#25D366) in RGB is (37, 211, 102). In CMYK, it is approximately (82, 0, 52, 17).
WhatsApp uses #ECE5DD for light gray surfaces, #D1D7DB for borders, and #111B21 for primary dark text. These neutrals are essential for the app's clean and readable interface.
Use #25D366 for primary actions and highlights, with supporting greens and neutrals for backgrounds, text, and surfaces. Always maintain sufficient contrast and follow brand guidelines for UI consistency.
The secondary color is WhatsApp Teal, #075E54, and the accent is WhatsApp Accent Green, #128C7E. 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 WhatsApp's colors consistently when it generates UI.
Make something in the spirit of WhatsApp
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.