Every chat mockup lives or dies on colour. The interface is familiar to billions of people, which means a wrong green is spotted in under a second — not consciously, but as a feeling that something is off. This reference collects the actual bubble, header and accent colours of the five most-mocked messaging apps, in light and dark mode, as used by the generators on this site. Bookmark it if you build mockups by hand in Figma; the generators already bake these values in.
The most-mocked interface on the internet, and the one most often wrong. On an iPhone the header is not green at all — it picks up the beige of the wallpaper (#efeae2), while the Android build wears the teal-green most people picture. The outgoing bubble is a soft sage green — not the header green, and definitely not the saturated green most clones use. Bubble radius is a modest 12px with a corner tail, not the 16–18px pill shape people remember.
| Element | Light mode | Dark mode |
|---|---|---|
| Chat background | #efeae2 | #0b141a |
| Header bar (iPhone) | #efeae2 | #202c33 |
| Incoming bubble | #ffffff | #202c33 |
| Outgoing bubble | #d9fdd3 | #005c4b |
| Blue read ticks | #53bdeb | #53bdeb |
| Secondary text | #667781 | #8696a0 |
iMessage (iPhone text messages)
Apple's blue is softer than most recreations — it leans pastel, and it pairs with a light grey incoming bubble. The details that matter: no timestamps inside bubbles (they sit in centred dividers between groups), and the small “Delivered” line under the last outgoing message.
| Element | Light mode | Dark mode |
|---|---|---|
| Chat background | #ffffff | #000000 |
| Outgoing bubble | #0b93f6 | #2652d9 |
| Incoming bubble | #e5e5ea | #26252a |
| Outgoing text | #ffffff | #ffffff |
Google Messages (Android SMS)
Material blue is bluer and colder than Apple's. Unlike iMessage, timestamps live inside the bubbles, and the header uses a letter avatar rather than a photo.
| Element | Light mode | Dark mode |
|---|---|---|
| Chat background | #ffffff | #1f1f1f |
| Outgoing bubble | #1a73e8 | #0b57d0 |
| Incoming bubble | #f1f3f4 | #2d2f31 |
| Accent / actions | #1a73e8 | #a8c7fa |
Telegram
Telegram's light mode outgoing bubble is a pale green with fully rounded, tail-less bubbles — geometrically closer to iMessage than WhatsApp. The desktop and mobile clients differ slightly; these are the mobile values.
| Element | Light mode | Dark mode |
|---|---|---|
| Chat background | #ffffff (patterned wallpaper) | #0f0f0f |
| Outgoing bubble | #eeffde | #2b5278 |
| Incoming bubble | #ffffff | #212121 |
| Check marks (read) | #4fae4e | #63d0fd |
Messenger and Instagram DM
Meta's pair share a family look: fully rounded, tail-less bubbles on white (or near-black), blue for Messenger, a purple-to-pink gradient for Instagram. Both use small “Seen” captions instead of tick systems.
| Element | Messenger light | Instagram DM light |
|---|---|---|
| Outgoing bubble | #0084ff | #3797f0 (gradient accents #a033ff→#e24aa2) |
| Incoming bubble | #f0f0f0 | #efefef |
| Chat background | #ffffff | #ffffff |
How to use these numbers
Two warnings from experience. First, screenshot colours lie: taking a screenshot, eyedropping it and trusting the result gives you the compressed, colour-managed version — close, but noticeably off next to a real device. The tables above are the values the real clients use. Second, colour is only half the game; geometry does the other half. Bubble radius, tail placement, timestamp position and max bubble width (roughly 75% of chat width everywhere) matter as much as hex codes. If you would rather not juggle either, the WhatsApp, iMessage, Telegram and Messenger generators ship with all of it pre-set — free, no signup, no watermark.