This palette translates a LinkedIn-inspired professional look into a crisp, interface-ready system anchored by the brand’s exact website blue. The main colors combine a confident network-blue with a steadier slate accent, while the neutrals keep the interface clean and highly readable.
This palette translates a LinkedIn-inspired professional look into a crisp, interface-ready system anchored by the brand’s exact website blue. The main colors combine a confident network-blue with a steadier slate accent, while the neutrals keep the interface clean and highly readable.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair the brand’s exact website blue with a nearby slate-blue accent, creating a recognizable professional system that feels consistent across logo, links, and buttons. The relationship stays close enough to feel unified while still giving the interface enough contrast to separate primary actions from secondary ones.
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 pair the brand’s exact website blue with a nearby slate-blue accent, creating a recognizable professional system that feels consistent across logo, links, and buttons. The relationship stays close enough to feel unified while still giving the interface enough contrast to separate primary actions from secondary ones.
RolesLogo, Link, Btn Primary Bg
This is the exact website blue and it carries the brand’s core recognition with immediate platform familiarity.
#0A66C210, 102, 194210, 90, 4095, 47, 0, 24RolesBtn Secondary Bg, Btn Outlined Border, Headline, Btn Outlined Text
This deeper slate blue adds structure and a more restrained professional tone without competing with the brand blue.
#355C7D53, 92, 125208, 40, 3558, 26, 0, 51The support colors extend the blue system with quieter steel and muted aqua notes that improve usability without changing the brand direction. They help separate icons, borders, and outlines while keeping the interface polished and understated.
RolesIcon, Border
This softened steel blue supports interface detail and reduces visual weight around UI elements.
#6E8FA8110, 143, 168206, 25, 5535, 15, 0, 34RolesDivider, Outline
This pale aqua-blue adds gentle separation for dividers and outlines while staying subordinate to the main blues.
#8FB7C9143, 183, 201199, 35, 6729, 9, 0, 21Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F7FA244, 247, 250210, 37, 972, 1, 0, 2RolesBg Dark, 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-website-brand-blue: #0A66C2;
--color-slate-network-blue: #355C7D;
--color-steel-blue-mist: #6E8FA8;
--color-muted-aqua-haze: #8FB7C9;
--color-pure-white: #FFFFFF;
--color-soft-cloud: #F4F7FA;
--color-graphite-ink: #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: #0A66C2;
--role-link: #0A66C2;
--role-btn-primary-bg: #0A66C2;
--role-btn-secondary-bg: #355C7D;
--role-btn-outlined-border: #355C7D;
--role-headline: #355C7D;
--role-btn-outlined-text: #355C7D;
--role-icon: #6E8FA8;
--role-border: #6E8FA8;
--role-divider: #8FB7C9;
--role-outline: #8FB7C9;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #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.{
"website-brand-blue": "#0A66C2",
"slate-network-blue": "#355C7D",
"steel-blue-mist": "#6E8FA8",
"muted-aqua-haze": "#8FB7C9",
"pure-white": "#FFFFFF",
"soft-cloud": "#F4F7FA",
"graphite-ink": "#111827"
}