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 |
Checking dark mode: inversion is not recolouring
The first thing to internalise is that a dark theme is not the light theme turned inside out. If you took each light value and subtracted it from white, WhatsApp light's outgoing bubble #d9fdd3 would become a dark red-violet, and the incoming bubble #ffffff would become #000000. The real app does neither: the outgoing bubble becomes a deep green #005c4b with light text, and the incoming bubble lifts to #202c33 — deliberately above the #0b141a background so it separates from it instead of vanishing into it.
That gives you a three-point test for any dark render. Take the background, the incoming bubble and the outgoing bubble: in a correct theme they are three distinct values, the incoming bubble sits lighter than the background, and the accent survives unchanged where the app treats it as a brand colour. WhatsApp's read tick is the clearest example — the blue #53bdeb is identical in both modes, because it is an accent rather than a tint. A screenshot whose read ticks change colour between modes was not built from the real palette.
Hue is allowed to move, too. Telegram's light outgoing bubble is a pale green #eeffde, but its dark outgoing bubble is a steel blue #2b5278 — not a dimmed green. So when you check a mockup, ask whether the dark palette was chosen for a dark background or merely derived from the light one. A green bubble on a near-black Telegram screen answers that question on its own.
Why headers and navigation bars get recoloured wrong
The header is the element people rebuild from memory, and memory reliably keeps the wrong version. The clearest case is WhatsApp: on iPhone the header is not green at all — it picks up the beige of the wallpaper, the same #efeae2 as the chat background, while the Android build wears the teal-green most people picture. A green header sitting above an iOS-style WhatsApp thread is one of the quickest fakes to catch, and it happens because people remember the app's brand colour instead of the screen in front of them.
The same pattern repeats across the family. Meta's apps use a white or near-white header regardless of how colourful the bubbles are: Instagram's DM header is plain white with black text, and Messenger's is white too. Telegram breaks the rule in the opposite direction — its header is a floating capsule rather than a solid bar, so there is no full-width header colour to copy at all. Snapchat is the loud exception, with a bright yellow header over a white conversation area, and Discord replaces the header with a channel name and a topic line.
Two relationships are worth memorising because they catch most header errors. First, a header that adds a colour the bubbles do not use is usually wrong — the header is normally a neutral surface or the app's single accent, not a third colour. Second, navigation chrome (tab bars, sidebars) tends to sit a step away from the content surface rather than sharing it, so Discord's dark sidebar reads a shade darker than the channel behind it. If the sidebar and the chat area are the same flat value, the mockup is missing depth the real app has.
Reading a screenshot backwards
The table is at least as useful in reverse: shown a screenshot, you can work out whether it is plausible without knowing the exact value it used. Start with relationships rather than hex codes. Is the incoming bubble on the correct side of the background? Is the accent consistent with the app's brand — a blue tick that is not WhatsApp's blue, or an Instagram bubble that is a flat colour instead of a gradient, is already suspect.
Then match the header to the platform family. White header with a gradient bubble points at Instagram; white header with a flat blue bubble and a Seen line points at Messenger; a floating capsule over a doodle wallpaper points at Telegram; a #-prefixed channel name with a topic line points at Discord; a yellow bar over a white surface points at Snapchat. If a screenshot's header contradicts its bubbles, one of the two was borrowed from another app.
Finally, remember that measurement has limits: an eyedropper on a downloaded image returns the compressed, colour-managed version, which drifts from the value the app actually uses. So treat the table as the reference and a screenshot as evidence about relationships, not exact numbers. For the full reader's checklist, including non-colour tells, see the spotting guide; for what a file can and cannot prove about its own origin, see the metadata piece.
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.