A vivid electric-coral and aquatic-teal system inspired by the image’s energetic creature graphic and neon lettering. The palette pairs playful motion with crisp digital clarity, making it feel bold, athletic, and immediately recognizable.
A vivid electric-coral and aquatic-teal system inspired by the image’s energetic creature graphic and neon lettering. The palette pairs playful motion with crisp digital clarity, making it feel bold, athletic, and immediately recognizable.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors balance hot coral against cool aqua, creating a high-energy contrast that stays memorable in both branding and interface states. Together they read as one system with strong visual tension and clear personality.
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 balance hot coral against cool aqua, creating a high-energy contrast that stays memorable in both branding and interface states. Together they read as one system with strong visual tension and clear personality.
RolesLogo, Btn Primary Bg
Drives recognition with a sharp, animated warmth that mirrors the image’s neon lettering and movement.
#FF3E8A255, 62, 138336, 100, 620, 76, 46, 0RolesLink, Btn Secondary Bg
Brings freshness and speed, giving the palette a cool counterweight that feels active and digital.
#2FC7D947, 199, 217186, 69, 5278, 8, 0, 15RolesHeadline, Btn Outlined Border, Btn Outlined Text
Adds a darker, more grounded accent that sharpens hierarchy and keeps the brighter colors from feeling too playful.
#7B2D63123, 45, 99318, 46, 330, 63, 20, 52The support accents extend the palette with muted, usable tones that soften the intensity without changing the brand’s overall energy. They help with structure, UI affordances, and
RolesIcon, Border
A lighter aqua support tone that reinforces the cool side of the palette while staying subtle in interface details.
#A8DDE3168, 221, 227186, 51, 7726, 3, 0, 11RolesDivider, Outline
A softened rose accent that echoes the coral hue for separators and outlines without competing with the main brand colors.
#E86AA6232, 106, 166331, 73, 660, 54, 28, 9Utility colors for backgrounds, text, borders, and balance.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F4F7F8244, 247, 248195, 22, 962, 0, 0, 3RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#10182016, 24, 32210, 33, 950, 25, 0, 87Copy 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-coral: #FF3E8A;
--color-aqua-surge: #2FC7D9;
--color-deep-berry: #7B2D63;
--color-mist-aqua: #A8DDE3;
--color-rose-flare: #E86AA6;
--color-pure-white: #FFFFFF;
--color-soft-cloud: #F4F7F8;
--color-ink-black: #101820;
}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: #FF3E8A;
--role-btn-primary-bg: #FF3E8A;
--role-link: #2FC7D9;
--role-btn-secondary-bg: #2FC7D9;
--role-headline: #7B2D63;
--role-btn-outlined-border: #7B2D63;
--role-btn-outlined-text: #7B2D63;
--role-icon: #A8DDE3;
--role-border: #A8DDE3;
--role-divider: #E86AA6;
--role-outline: #E86AA6;
--role-bg-light: #F4F7F8;
--role-bg-dark: #101820;
--role-text: #101820;
--role-btn-primary-text: #101820;
--role-btn-secondary-text: #101820;
}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-coral": "#FF3E8A",
"aqua-surge": "#2FC7D9",
"deep-berry": "#7B2D63",
"mist-aqua": "#A8DDE3",
"rose-flare": "#E86AA6",
"pure-white": "#FFFFFF",
"soft-cloud": "#F4F7F8",
"ink-black": "#101820"
}