WhatsApp's brand palette is anchored on the signature WhatsApp Green (#25D366) — the saturated emerald used on the telephone-in-a-bubble mark, the primary CTA, the outgoing-message bubble, and the read- receipt double-check. The supporting palette is a tonal green scale (light tints for chat surfaces, dark teal-greens for the dark-mode client) plus a neutral Teal accent (#075E54) historically associated with the WhatsApp header chrome before the 2020 visual refresh, and a quiet near-black canvas (#0B141A) for the dark-mode chat surface.
22 swatches 15 light roles 15 dark roles
Swatches
whatsapp-green
#25D366
Signature WhatsApp emerald — the brand's primary color, used on the telephone-bubble mark, the floating-action button, primary CTAs, and the read-receipt double-check.
whatsapp-green-dark
#128C7E
Deeper teal-green action color — used on hover/pressed states and on the legacy header chrome of the mobile client.
whatsapp-teal-dark
#075E54
Deep teal — the legacy WhatsApp header chrome (pre-2020 visual refresh), retained as a brand-recognised secondary.
whatsapp-green-50
#F4FDFA
Lightest green tint — used as a hover wash on green surfaces (--green-0).
whatsapp-green-100
#D5F7EB
Pale green tint — used on subtle highlight surfaces (--green-10).
whatsapp-green-200
#98EBCD
Mid-light green — used in illustration accents (--green-20).
whatsapp-green-300
#3AC7A1
Mid green — used as a secondary action accent (--green-30).
whatsapp-green-400
#26A28B
Brand green mid-tone — chat-surface accent (--green-40).
whatsapp-green-600
#148072
Deeper brand green — used on dark-mode action affordances (--green-60).
whatsapp-green-800
#005C54
Very deep green — used on dark-mode header surfaces (--green-80).
whatsapp-green-900
#0C4243
Deepest green — used as a dark-mode tertiary surface (--green-90).
whatsapp-green-1000
#17261F
Near-black green — used on dark-mode canvas accents (--green-100).
whatsapp-bubble-out
#DCF8C6
Pale green — the outgoing-message chat bubble color on the legacy mobile client. Visually distinct from incoming bubbles.
whatsapp-chat-bg-light
#E5DDD5
Warm beige — the historical WhatsApp chat-screen background tone (the "WhatsApp wallpaper default").
whatsapp-white
#FFFFFF
Pure white — primary text on dark canvas, surface fill on light mode.
whatsapp-surface-light
#F0F2F5
Light-mode elevated surface — used for the chat-list rail.
whatsapp-text-on-light
#111B21
Primary text on light-mode surfaces.
whatsapp-text-secondary-light
#667781
Secondary text and timestamps on light-mode surfaces.
whatsapp-canvas-dark
#0B141A
Deep blue-black — the WhatsApp dark-mode chat canvas. Tuned for OLED-friendly viewing.
whatsapp-surface-dark
#202C33
Dark-mode elevated surface — chat-list rail, top bar.
whatsapp-bubble-out-dark
#005C4B
Dark-mode outgoing-message bubble — deep teal-green.
whatsapp-text-on-dark
#E9EDEF
Primary text on the dark-mode canvas.
Mode role mappings
Light mode (15 roles)
accent
→ whatsapp-green accent-hover
→ whatsapp-green-dark background
→ whatsapp-white border
→ whatsapp-surface-light error
→ whatsapp-green-dark primary
→ whatsapp-green primary-hover
→ whatsapp-green-dark success
→ whatsapp-green surface
→ whatsapp-surface-light surface-elevated
→ whatsapp-white text-primary
→ whatsapp-text-on-light text-secondary
→ whatsapp-text-secondary-light text-tertiary
→ whatsapp-text-secondary-light warning
→ whatsapp-green-300 warning-hover
→ whatsapp-green-400 Dark mode (15 roles)
accent
→ whatsapp-green accent-hover
→ whatsapp-green-600 background
→ whatsapp-canvas-dark border
→ whatsapp-green-1000 error
→ whatsapp-green-dark primary
→ whatsapp-green primary-hover
→ whatsapp-green-600 success
→ whatsapp-green surface
→ whatsapp-surface-dark surface-elevated
→ whatsapp-surface-dark text-primary
→ whatsapp-text-on-dark text-secondary
→ whatsapp-green-200 text-tertiary
→ whatsapp-green-300 warning
→ whatsapp-green-300 warning-hover
→ whatsapp-green-400 Provenance
- Source
- https://www.meta.com/brand/resources/whatsapp/whatsapp-brand/
- License
Proprietary — All Rights Reserved- Attribution
- WhatsApp and the WhatsApp logo are trademarks of WhatsApp LLC, a Meta company. The signature WhatsApp Green (#25D366) is the value documented in the simple-icons brand database (which cites whatsapp.com as the source) and is corroborated by the deployed web.whatsapp.com client CSS, which exposes a tonal green scale (green-0 #F4FDFA through green-100 #17261F) keyed off the same primary hue. The chat-surface tones (#DCF8C6 outgoing-bubble, #E5DDD5 chat background, #075E54 header chrome, #128C7E action accent) are well-documented WhatsApp client values surfaced in the published brand-asset kit.
- Imported
-
2026-05-18 - Notes
- Derived from live site CSS at https://web.whatsapp.com/ on 2026-05-18; the published WhatsApp brand guide at meta.com/brand/resources/whatsapp/whatsapp-brand/ is policy-only (no hex codes), so the green scale was captured from the deployed client's --green-0..--green-100 CSS custom-property family. The proprietary brand typefaces (Super Sans VF / Super Serif VF / Super Sans Mono VF) are declared on the deployed client via @font-face but are not publicly distributed — the brand atom substitutes Inter as the open-source rendering pair.