A high-energy palette built from electric blue, vivid lime, and deep charcoal, with soft graphite and warm off-white accents to keep the system usable across interfaces. The contrast feels modern and editorial, giving the brand a bold visual signature without sacrificing clarity.
A high-energy palette built from electric blue, vivid lime, and deep charcoal, with soft graphite and warm off-white accents to keep the system usable across interfaces. The contrast feels modern and editorial, giving the brand a bold visual signature without sacrificing clarity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Electric blue and vivid lime create a sharp, memorable contrast that feels immediate and screen-native. Together they establish a bold visual rhythm that works well for branding, product highlights, and attention-driven interface moments.
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 blue and vivid lime create a sharp, memorable contrast that feels immediate and screen-native. Together they establish a bold visual rhythm that works well for branding, product highlights, and attention-driven interface moments.
RolesLogo, Btn Secondary Bg
A saturated blue that anchors recognition and brings a confident, fast-moving digital tone.
#2B43F543, 67, 245233, 91, 5682, 73, 0, 4RolesBtn Primary Bg, Link, Btn Outlined Border
A vivid lime that adds urgency and freshness, making calls to action stand out immediately.
#D8F15A216, 241, 9070, 84, 6510, 0, 63, 5RolesHeadline
A near-black grounding color that sharpens typography and keeps the palette feeling serious and controlled.
#20212432, 33, 36225, 6, 1311, 8, 0, 86Muted, cooler support tones extend the main palette by adding structure and hierarchy without competing with the bright blue and lime. They are intentionally quieter so the core br
RolesIcon, Border
A soft gray-blue that supports UI chrome and balances the palette with understated structure.
#7A7F8C122, 127, 140223, 7, 5113, 9, 0, 45RolesOutline, Divider
A pale neutral accent for separators and outlines that preserves whitespace and keeps layouts airy.
#EDEFF2237, 239, 242216, 16, 942, 1, 0, 5Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F5F1EA245, 241, 23438, 35, 940, 2, 4, 4RolesBg Dark, Text, Btn Primary Text
#0F101215, 16, 18220, 9, 617, 11, 0, 93Copy 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-cobalt: #2B43F5;
--color-lime-signal: #D8F15A;
--color-midnight-graphite: #202124;
--color-steel-fog: #7A7F8C;
--color-porcelain-mist: #EDEFF2;
--color-pure-white: #FFFFFF;
--color-warm-ivory: #F5F1EA;
--color-deep-ink: #0F1012;
}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: #2B43F5;
--role-btn-secondary-bg: #2B43F5;
--role-btn-primary-bg: #D8F15A;
--role-link: #D8F15A;
--role-btn-outlined-border: #D8F15A;
--role-headline: #202124;
--role-icon: #7A7F8C;
--role-border: #7A7F8C;
--role-outline: #EDEFF2;
--role-divider: #EDEFF2;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-btn-outlined-text: #F5F1EA;
--role-bg-dark: #0F1012;
--role-text: #0F1012;
--role-btn-primary-text: #0F1012;
}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-cobalt": "#2B43F5",
"lime-signal": "#D8F15A",
"midnight-graphite": "#202124",
"steel-fog": "#7A7F8C",
"porcelain-mist": "#EDEFF2",
"pure-white": "#FFFFFF",
"warm-ivory": "#F5F1EA",
"deep-ink": "#0F1012"
}