This palette uses deep Facebook blue as the recognizably dominant anchor, paired with a softer cyan-blue and a restrained navy to create a modern, trust-forward system. The supporting neutrals keep the interface crisp and readable while the accents add depth without diluting the core brand association.
This palette uses deep Facebook blue as the recognizably dominant anchor, paired with a softer cyan-blue and a restrained navy to create a modern, trust-forward system. The supporting neutrals keep the interface crisp and readable while the accents add depth without diluting the core brand association.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay in the blue family, which makes the system instantly recognizable and strongly tied to Zuckerberg-era product branding. The slight shift from bright platform blue to deeper navy gives the palette range while keeping the identity cohesive.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors stay in the blue family, which makes the system instantly recognizable and strongly tied to Zuckerberg-era product branding. The slight shift from bright platform blue to deeper navy gives the palette range while keeping the identity cohesive.
RolesLogo, Btn Primary Bg
This is the signature brand anchor that creates immediate recognition and a clear digital-first identity.
#1877F224, 119, 242214, 89, 5290, 51, 0, 5RolesLink, Btn Secondary Bg
This mid-blue adds flexibility for links and secondary actions while staying close to the core brand hue.
#4267B266, 103, 178220, 46, 4863, 42, 0, 30RolesHeadline
This deep navy strengthens hierarchy and gives headlines a confident, product-focused tone.
#0F172A15, 23, 42222, 47, 1164, 45, 0, 84The support colors extend the blue system with cooler, quieter accents that help structure the interface and add depth without pulling attention away from the main brand blues.
RolesIcon, Outline
This softened blue brightens interface details and keeps icons and outlines visible without competing with the main colors.
#5B8DEF91, 141, 239220, 82, 6562, 41, 0, 6RolesBtn Outlined Border
This light blue provides a gentle bordered treatment that supports the palette’s clean, approachable feel.
#A7C5F9167, 197, 249218, 87, 8233, 21, 0, 2Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesBg Dark, Btn Outlined Text, Border, Divider, Text
#11182717, 24, 39221, 39, 1156, 38, 0, 85Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-facebook-blue: #1877F2;
--color-steel-blue: #4267B2;
--color-midnight-navy: #0F172A;
--color-periwinkle: #5B8DEF;
--color-powder-blue: #A7C5F9;
--color-white: #FFFFFF;
--color-ivory: #F5F7FA;
--color-charcoal: #111827;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #1877F2;
--role-btn-primary-bg: #1877F2;
--role-link: #4267B2;
--role-btn-secondary-bg: #4267B2;
--role-headline: #0F172A;
--role-icon: #5B8DEF;
--role-outline: #5B8DEF;
--role-btn-outlined-border: #A7C5F9;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-light: #F5F7FA;
--role-bg-dark: #111827;
--role-btn-outlined-text: #111827;
--role-border: #111827;
--role-divider: #111827;
--role-text: #111827;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"facebook-blue": "#1877F2",
"steel-blue": "#4267B2",
"midnight-navy": "#0F172A",
"periwinkle": "#5B8DEF",
"powder-blue": "#A7C5F9",
"white": "#FFFFFF",
"ivory": "#F5F7FA",
"charcoal": "#111827"
}