This palette pairs an energetic Electric Blue with a grounded Indigo and a warm Coral to feel ambitious, modern, and investor-ready. The structure keeps the brand crisp in product UI while giving startup marketing enough contrast to feel bold and memorable.
This palette pairs an energetic Electric Blue with a grounded Indigo and a warm Coral to feel ambitious, modern, and investor-ready. The structure keeps the brand crisp in product UI while giving startup marketing enough contrast to feel bold and memorable.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Electric Blue and Indigo create a confident digital core, while Coral adds a sharper human accent that keeps the system energetic and approachable. Together they read as a contemporary startup palette with clear hierarchy and strong product usability.
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.
Electric Blue and Indigo create a confident digital core, while Coral adds a sharper human accent that keeps the system energetic and approachable. Together they read as a contemporary startup palette with clear hierarchy and strong product usability.
RolesLogo, Btn Primary Bg
Electric Blue gives the brand a fast, confident digital presence that feels built for growth.
#2563EB37, 99, 235221, 83, 5384, 58, 0, 8RolesLink, Btn Secondary Bg
Indigo adds depth and credibility, helping the system feel stable without losing momentum.
#4338CA67, 56, 202245, 58, 5167, 72, 0, 21RolesBtn Outlined Border, Btn Outlined Text, Headline
Coral introduces an optimistic human signal that lifts key messages and draws attention to calls to action.
#FB7185251, 113, 133351, 95, 710, 55, 47, 2The support accents extend the core blues and coral with quieter, usable variations that add structure without competing for attention. They help interface elements stay organized and balanced across dashboards, pages, and marketing surfaces.
RolesIcon, Border
Slate Blue softens the interface while staying aligned with the core blue family.
#7C8DB5124, 141, 181222, 28, 6031, 22, 0, 29RolesDivider, Outline
Periwinkle Gray creates calm separation and keeps layouts airy around the stronger brand colors.
#D6DCE8214, 220, 232220, 28, 878, 5, 0, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F7FB244, 247, 251214, 47, 973, 2, 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-electric-blue: #2563EB;
--color-indigo: #4338CA;
--color-coral: #FB7185;
--color-slate-blue: #7C8DB5;
--color-periwinkle-gray: #D6DCE8;
--color-white: #FFFFFF;
--color-ivory: #F4F7FB;
--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: #2563EB;
--role-btn-primary-bg: #2563EB;
--role-link: #4338CA;
--role-btn-secondary-bg: #4338CA;
--role-btn-outlined-border: #FB7185;
--role-btn-outlined-text: #FB7185;
--role-headline: #FB7185;
--role-icon: #7C8DB5;
--role-border: #7C8DB5;
--role-divider: #D6DCE8;
--role-outline: #D6DCE8;
--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.{
"electric-blue": "#2563EB",
"indigo": "#4338CA",
"coral": "#FB7185",
"slate-blue": "#7C8DB5",
"periwinkle-gray": "#D6DCE8",
"white": "#FFFFFF",
"ivory": "#F4F7FB",
"charcoal": "#111827"
}