Meta color palette
TechMeta's color identity centers on a vivid blue, complemented by a clean, neutral palette of grays and white, reflecting clarity and connectivity. The palette is designed for digital interfaces, ensuring accessibility and brand consistency.
meta.comMeta colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Meta BluePrimary4, 103, 223
- Meta CharcoalSecondary27, 27, 27
- Meta SkyAccent0, 198, 255
Surfaces
Page, cards and dividers.- Meta WhiteBackground255, 255, 255
- Meta SurfaceSurface245, 246, 247
- Meta Border GrayBorder206, 208, 212
Text
Three tiers of copy.- Meta Text BlackText5, 5, 5
- Meta Text GraySecondary text101, 103, 107
- Meta Muted GrayMuted text138, 141, 145
Semantic
Feedback and state colors.- Meta Success GreenSuccess49, 162, 76
- Meta Warning YellowWarning255, 185, 0
- Meta Error RedError250, 56, 62
- Meta Info BlueInfo28, 161, 241
Use Meta's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
meta-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1CA1F1;
--error: #FA383E;
--accent: #00C6FF;
--border: #CED0D4;
--primary: #0467DF;
--success: #31A24C;
--surface: #F5F6F7;
--warning: #FFB900;
--secondary: #1B1B1B;
--text-muted: #8A8D91;
--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.8: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.2:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Meta gray and neutral colors
The quiet part of the Meta palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Meta WhiteBackground
- HEX
- RGB
- HSL
- Meta SurfaceSurface
- HEX
- RGB
- HSL
- Meta Border GrayBorder
- HEX
- RGB
- HSL
- Meta Text BlackText
- HEX
- RGB
- HSL
- Meta Text GraySecondary text
- HEX
- RGB
- HSL
- Meta Muted GrayMuted text
- HEX
- RGB
- HSL
About Meta's colors
Meta’s palette is built around a strong blue, symbolizing trust and connectivity, with supporting neutrals for clarity and legibility. Accent and semantic colors are used sparingly to guide user attention and indicate status.
Primary blue is paired with white and dark gray for contrast.
Accent blue and semantic colors highlight actions and statuses.
Neutral grays provide structure and hierarchy.
Psychology
Blue conveys reliability and openness, reinforcing Meta’s mission of connection. The neutral tones ensure a professional, approachable interface.
Evolution
Meta’s palette evolved from Facebook’s original blue and gray, adopting brighter blues and cleaner neutrals with the 2021 rebrand. The core blue has remained central, but supporting colors have been refined for digital clarity.
Where Meta uses each color
- Primary
Meta Blue is used for logos, primary buttons, and key navigation elements.
- Secondary
Meta Charcoal appears in headers, footers, and dark UI backgrounds.
- Accent
Meta Sky is used for highlights, links, and active states.
- Backgrounds
Meta White and Meta Surface are used for page backgrounds and cards.
- Text
Meta Text Black and Meta Text Gray are used for body text and secondary information.
- Semantic
Success, warning, error, and info colors are used for status indicators, alerts, and notifications.
Meta color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Meta primary color is #0467DF, known as Meta Blue. This color is used for the logo and primary actions.
Meta Blue (#0467DF) has an RGB value of 4, 103, 223. For print, its approximate CMYK is 98, 54, 0, 13.
Meta uses several grays, including Meta Charcoal (#1B1B1B), Meta Text Gray (#65676B), and Meta Muted Gray (#8A8D91). These provide structure and readability across the UI.
Use Meta Blue (#0467DF) for primary actions and branding, neutrals for backgrounds and text, and semantic colors for status indicators. Always maintain sufficient contrast for accessibility.
The secondary color is Meta Charcoal, #1B1B1B, and the accent is Meta Sky, #00C6FF. Together with the primary they make up the three brand colors at the top of this page.
6 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 Meta's colors consistently when it generates UI.
Make something in the spirit of Meta
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.