A loud, high-energy palette built around electric citrus and vivid aqua with a punchy purple accent, designed to feel sporty, modern, and unmistakably Gen Z. The bright main colors create instant shelf impact while the cool supports add motion and digital polish without dulling the brand's intensity
A loud, high-energy palette built around electric citrus and vivid aqua with a punchy purple accent, designed to feel sporty, modern, and unmistakably Gen Z. The bright main colors create instant shelf impact while the cool supports add motion and digital polish without dulling the brand's intensity
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Electric citrus and vivid aqua create the core brand tension, with purple adding a sharp pop that keeps the system youthful and highly recognizable. The hues are loud enough for Gen Z appeal but still work as a disciplined identity system.
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 citrus and vivid aqua create the core brand tension, with purple adding a sharp pop that keeps the system youthful and highly recognizable. The hues are loud enough for Gen Z appeal but still work as a disciplined identity system.
RolesLogo, Btn Primary Bg
A high-voltage citrus green that grabs attention fast and gives the brand its loud, sporty signature.
#B8FF2C184, 255, 4480, 100, 5928, 0, 83, 0RolesLink, Btn Secondary Bg
A vivid aqua that feels fast, refreshing, and digital-first, ideal for motion, UI, and hydration cues.
#00D7FF0, 215, 255189, 100, 50100, 16, 0, 0RolesHeadline, Btn Outlined Border, Btn Outlined Text
A sharp purple accent that adds edge and contrast, keeping the palette modern rather than overly neon.
#7A2CFF122, 44, 255262, 100, 5952, 83, 0, 0The support accents extend the energy of the core palette while staying secondary, adding depth and usability across charts, highlights, and interactive states. Their cooler, dimmė
RolesIcon
A hot magenta accent that amplifies the youthful, hype-driven feel without replacing the main color story.
#FF4FD8255, 79, 216313, 100, 650, 69, 15, 0RolesBorder, Divider, Outline
A softer mint that tempers the brighter hues and provides clean structure for UI and packaging systems.
#5BE7C491, 231, 196165, 74, 6361, 0, 15, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F7FB244, 247, 251214, 47, 973, 2, 0, 2RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#0B102011, 16, 32226, 49, 866, 50, 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-neon-lime: #B8FF2C;
--color-aqua-shock: #00D7FF;
--color-ultra-violet: #7A2CFF;
--color-pulse-magenta: #FF4FD8;
--color-mint-surge: #5BE7C4;
--color-pure-white: #FFFFFF;
--color-ice-mist: #F4F7FB;
--color-midnight-ink: #0B1020;
}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: #B8FF2C;
--role-btn-primary-bg: #B8FF2C;
--role-link: #00D7FF;
--role-btn-secondary-bg: #00D7FF;
--role-headline: #7A2CFF;
--role-btn-outlined-border: #7A2CFF;
--role-btn-outlined-text: #7A2CFF;
--role-icon: #FF4FD8;
--role-border: #5BE7C4;
--role-divider: #5BE7C4;
--role-outline: #5BE7C4;
--role-bg-light: #FFFFFF;
--role-bg-dark: #0B1020;
--role-text: #0B1020;
--role-btn-primary-text: #0B1020;
--role-btn-secondary-text: #0B1020;
}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.{
"neon-lime": "#B8FF2C",
"aqua-shock": "#00D7FF",
"ultra-violet": "#7A2CFF",
"pulse-magenta": "#FF4FD8",
"mint-surge": "#5BE7C4",
"pure-white": "#FFFFFF",
"ice-mist": "#F4F7FB",
"midnight-ink": "#0B1020"
}