A punchy aqua-and-magenta palette with a playful, high-energy contrast that fits gaming, esports, or youth-focused digital brands. The colors feel instantly recognizable together: electric pink creates motion and attitude, while icy cyan and deep teal keep the system legible and modern.
A punchy aqua-and-magenta palette with a playful, high-energy contrast that fits gaming, esports, or youth-focused digital brands. The colors feel instantly recognizable together: electric pink creates motion and attitude, while icy cyan and deep teal keep the system legible and modern.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette pairs a hot magenta with vivid aqua and deep teal, creating a recognizable streetwise-tech identity rather than a standard harmonious set. The contrast is energetic and branded, with enough separation to keep the system flexible
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 palette pairs a hot magenta with vivid aqua and deep teal, creating a recognizable streetwise-tech identity rather than a standard harmonious set. The contrast is energetic and branded, with enough separation to keep the system flexible
RolesLogo, Btn Primary Bg
Drives the brand's attitude and instant recognition with a sharp, animated punch.
#E1007A225, 0, 122327, 100, 440, 100, 46, 12RolesLink, Btn Secondary Bg, Btn Outlined Border
Adds motion and digital clarity, giving the interface a bright interactive signal.
#28BFD640, 191, 214188, 69, 5081, 11, 0, 16RolesHeadline
Provides a grounded, slightly edgy anchor that keeps the bright accents feeling intentional.
#0E4A5A14, 74, 90193, 73, 2084, 18, 0, 65Muted blue-green accents extend the palette into UI details without competing with the main logo colors. They help separate structure, controls, and emphasis while staying inside a
RolesIcon, Border
A lighter aqua support tone that softens interface lines and icons without losing the brand's cool edge.
#7CD7E3124, 215, 227187, 65, 6945, 5, 0, 11RolesDivider, Outline
A restrained teal-blue accent that supports dividers and outlines with calm structure and good readability.
#3E93A662, 147, 166191, 46, 4563, 11, 0, 35Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F4F7F8244, 247, 248195, 22, 962, 0, 0, 3RolesBg Dark, Text, Btn Secondary Text
#0811148, 17, 20195, 43, 560, 15, 0, 92Copy 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-magenta: #E1007A;
--color-neon-aqua: #28BFD6;
--color-deep-teal-ink: #0E4A5A;
--color-soft-aqua-mist: #7CD7E3;
--color-steel-lagoon: #3E93A6;
--color-pure-white: #FFFFFF;
--color-frosted-white: #F4F7F8;
--color-near-black-ink: #081114;
}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: #E1007A;
--role-btn-primary-bg: #E1007A;
--role-link: #28BFD6;
--role-btn-secondary-bg: #28BFD6;
--role-btn-outlined-border: #28BFD6;
--role-headline: #0E4A5A;
--role-icon: #7CD7E3;
--role-border: #7CD7E3;
--role-divider: #3E93A6;
--role-outline: #3E93A6;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-outlined-text: #F4F7F8;
--role-bg-dark: #081114;
--role-text: #081114;
--role-btn-secondary-text: #081114;
}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-magenta": "#E1007A",
"neon-aqua": "#28BFD6",
"deep-teal-ink": "#0E4A5A",
"soft-aqua-mist": "#7CD7E3",
"steel-lagoon": "#3E93A6",
"pure-white": "#FFFFFF",
"frosted-white": "#F4F7F8",
"near-black-ink": "#081114"
}