WeChat color palette
SocialWeChat's color identity centers on its distinctive green, complemented by a modern grayscale UI and subtle accent hues. The palette is designed for clarity, approachability, and seamless digital interaction.
wechat.comWeChat colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- WeChat GreenPrimary7, 193, 96
- WeChat WhiteSecondary255, 255, 255
- WeChat Light GrayAccent245, 246, 250
Surfaces
Page, cards and dividers.- WeChat App BackgroundBackground247, 247, 247
- WeChat Card WhiteSurface255, 255, 255
- WeChat Divider GrayBorder229, 229, 229
Text
Three tiers of copy.- WeChat Main TextText25, 25, 25
- WeChat Secondary TextSecondary text123, 123, 123
- WeChat Muted TextMuted text178, 178, 178
Semantic
Feedback and state colors.- WeChat Success GreenSuccess7, 193, 96
- WeChat Warning YellowWarning255, 190, 0
- WeChat Error RedError250, 81, 81
- WeChat Info BlueInfo16, 174, 255
Use WeChat's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
wechat-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #10AEFF;
--error: #FA5151;
--accent: #F5F6FA;
--border: #E5E5E5;
--primary: #07C160;
--success: #07C160;
--surface: #FFFFFF;
--warning: #FFBE00;
--secondary: #FFFFFF;
--text-muted: #B2B2B2;
--background: #F7F7F7;
--text-primary: #191919;
--text-secondary: #7B7B7B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.4:1
Pass
Text on surface
Needs 4.5:1 for body text
17.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.0:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
2.0:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
WeChat gray and neutral colors
The quiet part of the WeChat palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- WeChat App BackgroundBackground
- HEX
- RGB
- HSL
- WeChat Card WhiteSurface
- HEX
- RGB
- HSL
- WeChat Divider GrayBorder
- HEX
- RGB
- HSL
- WeChat Main TextText
- HEX
- RGB
- HSL
- WeChat Secondary TextSecondary text
- HEX
- RGB
- HSL
- WeChat Muted TextMuted text
- HEX
- RGB
- HSL
About WeChat's colors
WeChat's palette is anchored by a vibrant green, supported by neutral grays and whites for a clean, modern interface. Accent colors are used sparingly for notifications and semantic feedback.
Primary green contrasts with neutral backgrounds for emphasis.
Grayscale tones support readability and hierarchy.
Semantic colors (red, yellow, blue) highlight status and alerts.
Psychology
The green conveys trust, vitality, and approachability, aligning with WeChat's role as a daily communication tool. Neutral grays and whites create a sense of clarity and simplicity.
Evolution
WeChat's color palette has remained stable since its early years, with minor adjustments to gray tones for improved accessibility. The primary green has consistently defined the brand's visual identity.
Where WeChat uses each color
- Primary
Used for main action buttons, highlights, and the app icon.
- Secondary
Applied to backgrounds, chat bubbles, and cards.
- Accent
Used for subtle UI elements and input fields.
- Backgrounds
Dominates app screens and chat backgrounds.
- Text
Text colors are used for primary, secondary, and muted content throughout the interface.
- Semantic
Success, warning, error, and info colors are used for notifications, alerts, and status indicators.
WeChat color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official WeChat primary color hex code is #07C160. This green is used throughout the app for branding and key actions.
WeChat Green (#07C160) has an RGB value of (7, 193, 96). Its approximate CMYK value is (96, 0, 50, 24).
WeChat uses #F7F7F7 for app backgrounds, #E5E5E5 for borders, #7B7B7B for secondary text, and #B2B2B2 for muted text. These neutrals create a clean and readable interface.
The primary green (#07C160) should be reserved for key actions and highlights, while grays and whites form the UI foundation. Semantic colors are only for status, alerts, and feedback.
The secondary color is WeChat White, #FFFFFF, and the accent is WeChat Light Gray, #F5F6FA. Together with the primary they make up the three brand colors at the top of this page.
2 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 WeChat's colors consistently when it generates UI.
Make something in the spirit of WeChat
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.