This palette uses a vibrant green and a deep forest green as main colors paired with a bright orange for energetic contrast, balanced by a warm off-white neutral to create an inviting and dynamic brand system.
This palette uses a vibrant green and a deep forest green as main colors paired with a bright orange for energetic contrast, balanced by a warm off-white neutral to create an inviting and dynamic brand system.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors use a split complementary harmony with vibrant and deep greens contrasted by a bright orange to ensure visual energy while remaining balanced and recognizable.
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 use a split complementary harmony with vibrant and deep greens contrasted by a bright orange to ensure visual energy while remaining balanced and recognizable.
RolesLogo, Link, Btn Primary Bg, Headline
Lime Green provides fresh energy and immediate attention, perfect for brand recognition and call-to-action elements.
#73B700115, 183, 082, 100, 3637, 0, 100, 28RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Forest Green adds depth and stability, grounding the bright lime and bright orange for a professional tone.
#163A2722, 58, 39148, 45, 1662, 0, 33, 77Pumpkin Orange injects warmth and enthusiasm, offering a strong contrast to greens and enhancing visibility of text on buttons.
#F26B21242, 107, 3321, 89, 540, 56, 86, 5The support colors include a muted green and a subtle off-white tone that extend the palette with soft understated accents to reinforce brand cohesion without overpowering main colors.
RolesIcon, Border, Divider, Outline
Moss Green complements the main greens with a softer tone, balancing vibrancy while supporting interface elements.
#88B04B136, 176, 7584, 40, 4923, 0, 57, 31RolesBg Light
Almond Cream offers a mild, warm neutral background that enhances readability and highlights main brand colors elegantly.
#F4E5DC244, 229, 22023, 52, 910, 6, 10, 4Utility colors for backgrounds, text, borders, and balance.
RolesText, Btn Primary Text
#1B1C1E27, 28, 30220, 5, 1110, 7, 0, 88RolesBg Dark, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F9F5F1249, 245, 24130, 40, 960, 2, 3, 2Copy 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-lime-green: #73B700;
--color-forest-green: #163A27;
--color-pumpkin-orange: #F26B21;
--color-moss-green: #88B04B;
--color-almond-cream: #F4E5DC;
--color-charcoal-black: #1B1C1E;
--color-pure-white: #FFFFFF;
--color-ivory: #F9F5F1;
}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: #73B700;
--role-link: #73B700;
--role-btn-primary-bg: #73B700;
--role-headline: #73B700;
--role-btn-secondary-bg: #163A27;
--role-btn-outlined-border: #163A27;
--role-btn-outlined-text: #163A27;
--role-icon: #88B04B;
--role-border: #88B04B;
--role-divider: #88B04B;
--role-outline: #88B04B;
--role-bg-light: #F4E5DC;
--role-text: #1B1C1E;
--role-btn-primary-text: #1B1C1E;
--role-bg-dark: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
}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.{
"lime-green": "#73B700",
"forest-green": "#163A27",
"pumpkin-orange": "#F26B21",
"moss-green": "#88B04B",
"almond-cream": "#F4E5DC",
"charcoal-black": "#1B1C1E",
"pure-white": "#FFFFFF",
"ivory": "#F9F5F1"
}