This palette combines trustworthy blue hues with supportive teal accents and grounded neutrals, creating a modern and approachable identity suitable for a seamless digital marketplace focused on human connection and reliability.
This palette combines trustworthy blue hues with supportive teal accents and grounded neutrals, creating a modern and approachable identity suitable for a seamless digital marketplace focused on human connection and reliability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main blues and teals are closely related hues that evoke trust, calmness, and openness, forming a cohesive and recognizable brand color system that appeals to diverse users.
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 blues and teals are closely related hues that evoke trust, calmness, and openness, forming a cohesive and recognizable brand color system that appeals to diverse users.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border
Royal Blue conveys reliability and professionalism, establishing trust as the brand's foundation.
#1E3A8A30, 58, 138224, 64, 3378, 58, 0, 46RolesBtn Secondary Bg, Headline, Btn Outlined Text
Teal Blue adds a modern and calming touch that enhances the approachable and human-centered nature of the marketplace.
#256D8537, 109, 133195, 56, 3372, 18, 0, 48Cornflower Blue provides a lighter accent that contrasts well with deeper blues, adding brightness and visual interest without overwhelming.
#3B82F659, 130, 246217, 91, 6076, 47, 0, 4Support colors extend the main palette with softer blue-greens and muted aquas that harmonize visually and emphasize clarity and accessibility without competing for attention.
RolesIcon, Border, Divider, Outline
Muted Aqua complements the strong blues by adding subtle depth and softness to interface elements, maintaining a tranquil and clean look.
#5CA9B892, 169, 184190, 39, 5450, 8, 0, 28Soft Slate reinforces readability and balance by providing a gentle contrast that supports main color elements without distraction.
#7FB3C9127, 179, 201198, 41, 6437, 11, 0, 21Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F9FAFB249, 250, 251210, 20, 981, 0, 0, 2RolesText
#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-royal-blue: #1E3A8A;
--color-teal-blue: #256D85;
--color-cornflower-blue: #3B82F6;
--color-muted-aqua: #5CA9B8;
--color-soft-slate: #7FB3C9;
--color-pure-white: #FFFFFF;
--color-off-white: #F9FAFB;
--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: #1E3A8A;
--role-link: #1E3A8A;
--role-btn-primary-bg: #1E3A8A;
--role-btn-outlined-border: #1E3A8A;
--role-btn-secondary-bg: #256D85;
--role-headline: #256D85;
--role-btn-outlined-text: #256D85;
--role-icon: #5CA9B8;
--role-border: #5CA9B8;
--role-divider: #5CA9B8;
--role-outline: #5CA9B8;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F9FAFB;
--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.{
"royal-blue": "#1E3A8A",
"teal-blue": "#256D85",
"cornflower-blue": "#3B82F6",
"muted-aqua": "#5CA9B8",
"soft-slate": "#7FB3C9",
"pure-white": "#FFFFFF",
"off-white": "#F9FAFB",
"charcoal": "#111827"
}