A high-contrast lime-and-ink system built around a sharp electric accent, grounded by deep charcoal and softened with muted olive and slate support tones. It feels modern, editorial, and technically precise while staying flexible enough for brand, product, and interface use.
A high-contrast lime-and-ink system built around a sharp electric accent, grounded by deep charcoal and softened with muted olive and slate support tones. It feels modern, editorial, and technically precise while staying flexible enough for brand, product, and interface use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair an electric lime with grounded darks and a restrained olive, creating a recognizable system that feels sharp rather than generic. The contrast gives the palette a bold digital edge while keeping the overall structure in
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 pair an electric lime with grounded darks and a restrained olive, creating a recognizable system that feels sharp rather than generic. The contrast gives the palette a bold digital edge while keeping the overall structure in
RolesLogo, Btn Primary Bg, Btn Outlined Border
A vivid signal color that gives the brand instant recognition and strong action cues.
#D7F20A215, 242, 1067, 92, 4911, 0, 96, 5RolesHeadline, Btn Secondary Bg
A near-black anchor that adds authority and makes the bright accent feel intentional.
#11111117, 17, 170, 0, 70, 0, 0, 93RolesLink, Btn Outlined Text
A muted green-olive that bridges the electric accent and the darker grounding tones.
#4F5B2A79, 91, 4275, 37, 2613, 0, 54, 64The support accents extend the main palette with subdued, utility-driven tones that improve hierarchy without competing for attention. They keep the interface readable and give the
RolesIcon, Border
A cool slate support tone that adds clarity for UI structure without stealing focus from the primary lime.
#70808D112, 128, 141207, 11, 5021, 9, 0, 45RolesDivider, Outline
A softened moss accent that quietly reinforces the palette’s organic undertone and works well for subtle boundaries.
#8B9463139, 148, 9971, 20, 486, 0, 33, 42Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F4EE244, 244, 23860, 21, 950, 0, 2, 4RolesBg Dark, Text, Btn Primary Text
#0A0A0A10, 10, 100, 0, 40, 0, 0, 96Copy 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-lime: #D7F20A;
--color-ink-black: #111111;
--color-olive-graphite: #4F5B2A;
--color-steel-slate: #70808D;
--color-moss-neutral: #8B9463;
--color-pure-white: #FFFFFF;
--color-soft-paper: #F4F4EE;
--color-deep-near-black: #0A0A0A;
}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: #D7F20A;
--role-btn-primary-bg: #D7F20A;
--role-btn-outlined-border: #D7F20A;
--role-headline: #111111;
--role-btn-secondary-bg: #111111;
--role-link: #4F5B2A;
--role-btn-outlined-text: #4F5B2A;
--role-icon: #70808D;
--role-border: #70808D;
--role-divider: #8B9463;
--role-outline: #8B9463;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #0A0A0A;
--role-text: #0A0A0A;
--role-btn-primary-text: #0A0A0A;
}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-lime": "#D7F20A",
"ink-black": "#111111",
"olive-graphite": "#4F5B2A",
"steel-slate": "#70808D",
"moss-neutral": "#8B9463",
"pure-white": "#FFFFFF",
"soft-paper": "#F4F4EE",
"deep-near-black": "#0A0A0A"
}