This startup-inspired palette pairs a confident cobalt with a sharp coral and a crisp teal to signal momentum, product clarity, and modern energy. The system stays usable with disciplined neutrals, so the brand can feel ambitious in marketing while remaining clean in product interfaces.
This startup-inspired palette pairs a confident cobalt with a sharp coral and a crisp teal to signal momentum, product clarity, and modern energy. The system stays usable with disciplined neutrals, so the brand can feel ambitious in marketing while remaining clean in product interfaces.
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 energetic and product-forward without defaulting to a generic blue-only startup look. Cobalt anchors trust, Coral adds urgency, and Teal brings clarity and a sense of responsive motion.
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 energetic and product-forward without defaulting to a generic blue-only startup look. Cobalt anchors trust, Coral adds urgency, and Teal brings clarity and a sense of responsive motion.
RolesLogo, Btn Primary Bg
Cobalt gives the brand a credible, founder-friendly anchor that reads as decisive and scalable.
#2463EB36, 99, 235221, 83, 5385, 58, 0, 8RolesLink, Btn Secondary Bg, Headline
Coral adds a fast-moving, human pulse that helps important actions and messaging stand out.
#FF6B5A255, 107, 906, 100, 680, 58, 65, 0RolesBtn Outlined Border, Btn Outlined Text
Teal softens the system with a fresh product feel and supports a more interactive, contemporary interface.
#18B7A624, 183, 166174, 77, 4187, 0, 9, 28The support colors extend the main palette with restrained, usability-first accents that keep the system polished rather than noisy. They reinforce hierarchy and structure while staying visually subordinate to the primary brand hues.
RolesIcon, Border
Slate provides calm interface structure and keeps utility elements legible without competing with the brand colors.
#7C8A9E124, 138, 158215, 15, 5522, 13, 0, 38RolesDivider, Outline
Pewter adds a light technical edge that separates UI components cleanly and quietly.
#D7DEE8215, 222, 232215, 27, 887, 4, 0, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F7FA245, 247, 250216, 33, 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: #2463EB;
--color-coral: #FF6B5A;
--color-teal: #18B7A6;
--color-slate: #7C8A9E;
--color-pewter: #D7DEE8;
--color-white: #FFFFFF;
--color-cloud: #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: #2463EB;
--role-btn-primary-bg: #2463EB;
--role-link: #FF6B5A;
--role-btn-secondary-bg: #FF6B5A;
--role-headline: #FF6B5A;
--role-btn-outlined-border: #18B7A6;
--role-btn-outlined-text: #18B7A6;
--role-icon: #7C8A9E;
--role-border: #7C8A9E;
--role-divider: #D7DEE8;
--role-outline: #D7DEE8;
--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": "#2463EB",
"coral": "#FF6B5A",
"teal": "#18B7A6",
"slate": "#7C8A9E",
"pewter": "#D7DEE8",
"white": "#FFFFFF",
"cloud": "#F5F7FA",
"charcoal": "#111827"
}