This startup-inspired palette pairs a crisp cobalt with an energetic teal and a confident coral to signal momentum, clarity, and product ambition. The neutrals stay clean and highly legible so the main colors can carry the brand recognition across interface and marketing use.
This startup-inspired palette pairs a crisp cobalt with an energetic teal and a confident coral to signal momentum, clarity, and product ambition. The neutrals stay clean and highly legible so the main colors can carry the brand recognition across interface and marketing use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a triadic system that feels active and product-driven without becoming chaotic. Cobalt, teal, and coral give the startup a recognizable visual rhythm across branding, calls to action, and key highlights.
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 form a triadic system that feels active and product-driven without becoming chaotic. Cobalt, teal, and coral give the startup a recognizable visual rhythm across branding, calls to action, and key highlights.
RolesLogo, Btn Primary Bg, Headline
Cobalt establishes the core startup identity with a sharp, reliable digital presence.
#2563EB37, 99, 235221, 83, 5384, 58, 0, 8RolesLink, Btn Secondary Bg, Btn Outlined Border
Teal adds forward motion and a product-friendly accent that supports navigation and secondary actions.
#14B8A620, 184, 166173, 80, 4089, 0, 10, 28RolesBtn Outlined Text
Coral introduces an energetic counterpoint that keeps the system lively and memorable.
#FF6B4A255, 107, 7411, 100, 650, 58, 71, 0The support colors extend the palette with softer, quieter accents that reinforce the main colors without competing with them. They add interface flexibility and subtle emphasis for supporting elements.
RolesIcon, Border
Slate Blue bridges the primary blues with a restrained, professional tone for structural UI details.
#5B7C9991, 124, 153208, 25, 4841, 19, 0, 40RolesDivider, Outline
Seafoam Gray softens separators and outlines while staying connected to the palette's cool undertones.
#8FAFB5143, 175, 181189, 20, 6421, 3, 0, 29Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F7FA244, 247, 250210, 37, 972, 1, 0, 2RolesBg Dark, Text, Btn Secondary 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-cobalt: #2563EB;
--color-teal: #14B8A6;
--color-coral: #FF6B4A;
--color-slate-blue: #5B7C99;
--color-seafoam-gray: #8FAFB5;
--color-white: #FFFFFF;
--color-ivory: #F4F7FA;
--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-headline: #2563EB;
--role-link: #14B8A6;
--role-btn-secondary-bg: #14B8A6;
--role-btn-outlined-border: #14B8A6;
--role-btn-outlined-text: #FF6B4A;
--role-icon: #5B7C99;
--role-border: #5B7C99;
--role-divider: #8FAFB5;
--role-outline: #8FAFB5;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #111827;
--role-text: #111827;
--role-btn-secondary-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.{
"cobalt": "#2563EB",
"teal": "#14B8A6",
"coral": "#FF6B4A",
"slate-blue": "#5B7C99",
"seafoam-gray": "#8FAFB5",
"white": "#FFFFFF",
"ivory": "#F4F7FA",
"charcoal": "#111827"
}