Colors matter. They matter a lot more than we think. When you open WhatsApp, that specific shade of green hits your brain and immediately signals "messages" or "safety." It’s iconic. But here is the thing: if you are a designer or a developer trying to match that exact brand identity, you’ve probably noticed that searching for the whatsapp dark green color code feels like chasing a ghost. You find one site saying it is #075E54 and another swearing by #128C7E.
It's frustrating.
The truth is that WhatsApp doesn't just use one "green." The app is a complex ecosystem of layers, gradients, and subtle UI shifts. If you are looking for the dark green specifically—the one used in the header of the Android app or the deep accents in dark mode—you have to look at the actual CSS and system assets. Most people just grab a screenshot, use a color picker, and call it a day. That is a mistake because compression ruins the hex code every single time.
The Definitive WhatsApp Dark Green Color Code Breakdown
Let's get surgical. If we are talking about the classic "Teal Green" that defined the WhatsApp header for years on Android devices, the hex code you want is #075E54. This is the heavy lifter. It’s a deep, desaturated green that leans heavily into blue territory. In the world of RGB, this is composed of 7 parts red, 94 parts green, and 84 parts blue. It feels professional and stable. It’s not "neon." It’s "utility."
But wait.
Modern WhatsApp has shifted. With the rollout of the "new" design language in 2024 and 2025, the brand moved toward a much more vibrant, punchy green for its primary actions, while keeping the dark greens for specific UI elements like the top bar in certain legacy views or dark mode backgrounds. For the "Darker" green used in the dark mode interface—specifically the background of the chat bubbles in dark mode—the code is #056162. It’s subtle. You might not even notice the difference between that and the header green unless you're staring at a high-res OLED screen.
Then there is the "Checkmark Green." You know the one. That little double-tick that tells you your message was read? That is a different beast entirely. It needs to pop against both light and dark backgrounds.
Why the Hex Codes Keep Changing
Software isn't static. Meta (the company formerly known as Facebook) likes to tweak things. They perform A/B tests constantly. One week, a group of users might have a header that is 2% more blue. The next week, it’s reverted.
When you look for the whatsapp dark green color code, you are looking for a moving target. In the latest design system documentation, they emphasize accessibility. This means the contrast ratios have to meet WCAG 2.1 standards. If a green is too dark, you can't read white text over it. If it's too light, it looks cheap.
The color #128C7E is often cited as the "main" green, but honestly? That is the light-medium green. It’s the "Teal Green Light." It is what you see in the floating action buttons (that little message icon in the bottom right). It isn't the dark green. If you use #128C7E for a header, your app will look "off" to a power user. It will feel too bright, almost like a knock-off version of the app.
How to Use These Codes Without Breaking Your Design
If you’re building an app or a website and you want that "WhatsApp feel," don't just plaster #075E54 everywhere. That’s a rookie move. The magic of the WhatsApp UI is in the balance between the deep greens and the neutral greys.
- Header Background: Use #075E54.
- Status Bar (The very top): Use a slightly darker shade, roughly #054D44, to create depth.
- Action Buttons: Use the punchier #25D366 (the "Bright Green").
- Dark Mode Backgrounds: Stick to #111B21. This isn't green at all—it's a very deep navy charcoal.
Most designers fail because they forget about "Visual Weight." A large block of #075E54 looks much darker than a small icon of the same color. It’s an optical illusion. You have to adjust based on the surface area. If you are designing a large hero section for a landing page, you might actually want to lighten the dark green by about 5% to keep it from feeling oppressive.
The Psychology of WhatsApp's Green Selection
Why did they pick these colors? It wasn't random. Green is the color of safety, growth, and—most importantly for a messaging app—permission. Think of a traffic light. Green means "Go." In the early days of mobile tech, messaging was expensive and unreliable. WhatsApp used green to signal that it was a safe, free, and "always-on" alternative to SMS.
The whatsapp dark green color code specifically provides a sense of "Established Trust." It feels like a utility, like a government building or a bank, but with a friendly edge. If they had gone with a bright lime green for the headers, the app would have felt like a toy. By using the deep teal-greens, they made it feel like a tool.
Real-World Implementation for Developers
For the coders in the room, here is how you should define these in your CSS variables or Tailwind config. Don't name them "whatsappGreen1." That is a nightmare to maintain. Name them by their function.
:root {
--wa-header-dark: #075E54;
--wa-teal-light: #128C7E;
--wa-action-green: #25D366;
--wa-dark-bg: #111B21;
--wa-chat-bubble-dark: #056162;
}
If you are working in Flutter or React Native, remember that colors can render differently on iOS vs. Android. Android screens (especially Samsung's AMOLEDs) tend to oversaturate greens. You might find that #075E54 looks almost black on some screens and vibrant teal on others. This is why testing on physical devices is non-negotiable. Don't trust your MacBook Pro screen to tell you what a budget Android phone sees.
Misconceptions About the Brand Green
I see this a lot on forums: people think the WhatsApp logo green is the same as the app header green.
It isn't. Not even close.
The logo—the actual icon on your home screen—is #25D366. It’s bright. It’s designed to stand out against a sea of other app icons. If you used the whatsapp dark green color code (#075E54) for the logo, it would disappear into the background on many wallpapers. The brand uses a "Hierarchy of Greens."
- Vibrant Green (#25D366): For logos, icons, and notifications.
- Teal Green (#128C7E): For mid-level UI elements.
- Dark Teal Green (#075E54): For headers and structural framing.
The "Invisible" Greens of Dark Mode
Dark mode changed everything. In late 2019, when WhatsApp finally caved and gave us a dark theme, they didn't just invert the colors. That would have looked hideous. Instead, they moved into a palette of "Deep Sea" colors.
The background of the chat—where you actually spend 90% of your time—is #0B141A. It’s an incredibly dark blue-green. If you're trying to match the dark mode experience, using a pure black (#000000) will make your design look "cheap." Pure black creates "smearing" on OLED screens when you scroll. By using a very dark green-tinted charcoal, WhatsApp avoids this technical issue while keeping the contrast high.
How to Sample the Color Yourself (The Right Way)
If you don't trust the hex codes provided here, you can find them yourself, but don't use a screenshot. Screenshots are processed by your phone's color profile (P3, sRGB, etc.).
Instead, use a web-based inspector if you're looking at WhatsApp Web.
👉 See also: Types of Files in a Computer: Why Your PC Is Actually a Digital Library
- Open WhatsApp Web in Chrome.
- Right-click the header.
- Select "Inspect."
- Look at the
background-colorproperty in the CSS pane.
You'll see exactly what the developers at Meta are using today. Often, they use HSL (Hue, Saturation, Lightness) instead of Hex. You might see something like hsl(172, 86%, 20%). This is actually better for design because it allows you to tweak the lightness without changing the "green-ness" of the color.
Actionable Steps for Your Next Project
You have the codes. Now, use them intelligently. If you are designing an interface that needs to feel familiar to WhatsApp users, follow these specific steps:
Start with the primary dark green (#075E54) for your most important structural elements. This establishes the "mental link" to WhatsApp immediately. It is the anchor of the entire visual identity.
Balance it with a neutral off-white. Don't use pure #FFFFFF for text. WhatsApp often uses a very slight grey or a high-transparency white for secondary text to reduce eye strain. This is a nuance most people miss.
Check your contrast. Use a tool like Adobe Color or WebAIM to ensure your green and white combinations are readable. If you go too dark with the green, you might need to increase the font weight of your text to keep it legible.
Avoid "Color Overload." The reason WhatsApp feels clean despite using several shades of green is that they use a lot of "Negative Space." The greens are the accents, not the whole world. Keep your background colors muted—either the light grey/white of the standard mode or the deep charcoal of the dark mode—and let the dark green act as the "boundary" for the content.
The whatsapp dark green color code isn't just a single number. It is a system of shades including #075E54, #128C7E, and #056162 that work together to create a cohesive, trustworthy environment. Grab these hex values, plug them into your CSS or Figma file, and you’re already ahead of 90% of the people just guessing based on a compressed JPEG.
Key Reference Values:
- Primary Dark Green (Header): #075E54
- Secondary Teal Green: #128C7E
- Bright Action Green: #25D366
- Dark Mode Surface: #111B21
- Dark Mode Bubble: #056162
To implement these effectively, always prioritize the #075E54 hex code for the top-level navigation components, as this is the most recognizable "Dark Green" associated with the brand's heritage on mobile platforms. For modern web-based mirrors, ensure you are sampling directly from the DOM to account for any real-time CSS variable updates Meta may have pushed in the last 24 hours.