Facebook color palette
SocialFacebook's color identity is defined by its signature blue, complemented by a neutral gray palette and clear, accessible UI tones. The palette is designed for clarity, trust, and usability across digital platforms.
facebook.comFacebook colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Facebook BluePrimary8, 102, 255
- Facebook Light GraySecondary240, 242, 245
- Facebook GreenAccent66, 183, 42
Surfaces
Page, cards and dividers.- Facebook WhiteBackground255, 255, 255
- Facebook Surface GraySurface228, 230, 235
- Facebook Border GrayBorder206, 208, 212
Text
Three tiers of copy.- Facebook BlackText5, 5, 5
- Facebook Secondary GraySecondary text101, 103, 107
- Facebook Muted GrayMuted text138, 141, 145
Semantic
Feedback and state colors.- Facebook Success GreenSuccess49, 162, 76
- Facebook Warning YellowWarning247, 185, 40
- Facebook Error RedError250, 56, 62
- Facebook Info BlueInfo28, 156, 234
Use Facebook's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
facebook-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1C9CEA;
--error: #FA383E;
--accent: #42B72A;
--border: #CED0D4;
--primary: #0866FF;
--success: #31A24C;
--surface: #E4E6EB;
--warning: #F7B928;
--secondary: #F0F2F5;
--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
16.3: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
4.5: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
2.7:1
Fail
Facebook gray and neutral colors
The quiet part of the Facebook palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Facebook WhiteBackground
- HEX
- RGB
- HSL
- Facebook Surface GraySurface
- HEX
- RGB
- HSL
- Facebook Border GrayBorder
- HEX
- RGB
- HSL
- Facebook BlackText
- HEX
- RGB
- HSL
- Facebook Secondary GraySecondary text
- HEX
- RGB
- HSL
- Facebook Muted GrayMuted text
- HEX
- RGB
- HSL
About Facebook's colors
Facebook's palette is anchored by a strong blue, symbolizing trust and approachability, and is supported by a range of neutral grays for clarity and accessibility. Accent colors are used sparingly for status and actions.
Primary blue contrasts with white and light gray backgrounds.
Accent green and yellow highlight actions and statuses.
Neutral grays structure UI surfaces and text.
Psychology
Blue is associated with trust, reliability, and communication, aligning with Facebook's brand values. The neutral grays provide a sense of professionalism and readability.
Evolution
Facebook's palette has remained stable, with the blue refined over time for digital clarity. Grays and accent colors have been updated for accessibility and modern UI standards.
Where Facebook uses each color
- Primary
Used for navigation bars, primary buttons, and key interactive elements.
- Secondary
Applied to backgrounds, cards, and UI surfaces.
- Accent
Highlights actions such as 'Add Friend' or notifications.
- Backgrounds
White and light gray are used for main app and web backgrounds.
- Text
Black and gray tones are used for primary, secondary, and muted text.
- Semantic
Green, yellow, and red are used for success, warning, and error messages respectively.
Facebook color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Facebook primary color hex code is #0866FF. This blue is used across the brand's main interface elements.
Facebook Blue (#0866FF) is RGB(8, 102, 255) and CMYK(97, 60, 0, 0). These values ensure consistency across print and digital media.
Facebook uses several official grays: #F0F2F5 (Light Gray), #E4E6EB (Surface Gray), #CED0D4 (Border Gray), #65676B (Secondary Gray), and #8A8D91 (Muted Gray). These provide structure and readability throughout the interface.
The primary blue (#0866FF) should be reserved for key actions and navigation, while grays and whites form the background and surfaces. Accent and semantic colors are used sparingly for notifications and status indicators.
The secondary color is Facebook Light Gray, #F0F2F5, and the accent is Facebook Green, #42B72A. Together with the primary they make up the three brand colors at the top of this page.
5 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 Facebook's colors consistently when it generates UI.
Make something in the spirit of Facebook
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.