Messenger color palette
SocialMessenger's color identity is defined by a vibrant blue primary, complemented by gradients and neutral grays for modern, accessible communication. The palette is designed for clarity and approachability across digital interfaces.
messenger.comMessenger colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Messenger BluePrimary8, 102, 255
- Messenger CyanSecondary68, 190, 199
- Messenger MagentaAccent245, 0, 87
Surfaces
Page, cards and dividers.- Messenger WhiteBackground255, 255, 255
- Messenger Light GraySurface240, 242, 245
- Messenger Border GrayBorder206, 208, 212
Text
Three tiers of copy.- Messenger BlackText5, 5, 5
- Messenger GraySecondary text101, 103, 107
- Messenger Muted GrayMuted text176, 179, 184
Semantic
Feedback and state colors.- Messenger GreenSuccess49, 162, 76
- Messenger YellowWarning247, 185, 40
- Messenger RedError250, 56, 62
- Messenger Info BlueInfo0, 178, 255
Use Messenger's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
messenger-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B2FF;
--error: #FA383E;
--accent: #F50057;
--border: #CED0D4;
--primary: #0866FF;
--success: #31A24C;
--surface: #F0F2F5;
--warning: #F7B928;
--secondary: #44BEC7;
--text-muted: #B0B3B8;
--background: #FFFFFF;
--text-primary: #050505;
--text-secondary: #65676B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
20.4:1
Pass
Text on surface
Needs 4.5:1 for body text
18.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Messenger background, border and text colors
The quiet part of the Messenger palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Messenger WhiteBackground
- HEX
- RGB
- HSL
- Messenger Light GraySurface
- HEX
- RGB
- HSL
- Messenger Border GrayBorder
- HEX
- RGB
- HSL
- Messenger BlackText
- HEX
- RGB
- HSL
- Messenger GraySecondary text
- HEX
- RGB
- HSL
- Messenger Muted GrayMuted text
- HEX
- RGB
- HSL
About Messenger's colors
Messenger's palette centers on a vivid blue, supported by bright accent hues and neutral grays for clarity and accessibility. The colors are chosen to enhance readability and create a friendly, modern interface.
Primary blue is complemented by cyan and magenta accents.
Neutral grays provide structure and readability.
Accent colors highlight important actions and notifications.
Psychology
Blue conveys trust, reliability, and approachability, which are essential for a messaging platform. The accent magenta adds vibrancy and draws attention to interactive elements.
Evolution
Messenger's palette has remained consistent, with the blue primary anchoring its identity since its separation from Facebook. Gradients and accent colors have been refined for a more modern, digital-first appearance.
Where Messenger uses each color
- Primary
Used for main action buttons, links, and key highlights throughout the Messenger app and web interface.
- Secondary
Appears in secondary buttons, icons, and chat bubbles to provide visual hierarchy.
- Accent
Used for notification badges, reactions, and interactive UI elements.
- Backgrounds
White and light gray backgrounds are used for chat screens, message lists, and modal surfaces.
- Text
Primary text is nearly black for maximum readability, with gray tones for secondary and muted text.
- Semantic
Green, yellow, and red are used for status indicators, alerts, and error messages.
Messenger color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Messenger primary color hex code is #0866FF. This blue is used for main actions and branding.
Messenger Blue (#0866FF) has an RGB value of 8, 102, 255. In CMYK, it is approximately 97, 60, 0, 0.
Messenger uses several grays such as #F0F2F5 for surfaces, #CED0D4 for borders, and #65676B for secondary text. These neutrals support readability and modern design.
Use #0866FF for primary actions and branding, with accent and neutral colors for hierarchy and clarity. Always ensure sufficient contrast for accessibility.
The secondary color is Messenger Cyan, #44BEC7, and the accent is Messenger Magenta, #F50057. Together with the primary they make up the three brand colors at the top of this page.
4 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 Messenger's colors consistently when it generates UI.
Make something in the spirit of Messenger
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.