Vibrant Green Lime Color Palette for Tech Brands

Vibrant Green Lime Color Palette

This palette draws inspiration from the rich, layered greens and vivid lime hues in the image to create a fresh, energetic system ideal for eco-conscious and vibrant brands. It combines strong greens with a bright yellow-green accent and balanced neutrals for versatility and clarity.

AnalogousTechgreenlimefreshvibrant

Main (Brand) Colors

The main colors work together as an analogous green harmony, ranging from deep grass green to vivid lime, evoking vitality and modernity for a cohesive brand presence.

PrimaryGrass Green

RolesLogo, Link, Btn Primary Bg, Headline

Grass Green brings a grounded, natural feel that communicates growth and reliability.

HEX#5829B6

RGB88, 41, 182

HSL260, 63, 44

CMYK52, 77, 0, 29

SecondaryLime Green

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Lime Green injects energy and a contemporary edge, perfect for call-to-action elements.

HEX#F5F5EF

RGB245, 245, 239

HSL60, 23, 95

CMYK0, 0, 2, 4

TertiaryYellow-Green

RolesBg Dark

Yellow-Green adds brightness and optimism, supporting contrast and readability in the palette.

HEX#FD5411

RGB253, 84, 17

HSL17, 98, 53

CMYK0, 67, 93, 1

Support Colors

The support colors extend the main greens with softer, cooler green variations that balance intensity and add subtle depth without competing visually.

Olive Green

RolesIcon, Border, Divider, Outline

Olive Green provides a muted, stable tone that complements the brighter main greens and anchors interface elements.

HEX#5c9a31

RGB92, 154, 49

HSL95, 52, 40

CMYK40, 0, 68, 40

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

White

RolesBg Light, Btn Primary Text

HEX#ffffff

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Pale Lime

HEX#f2f9d4

RGB242, 249, 212

HSL71, 76, 90

CMYK3, 0, 15, 2

Dark Olive

RolesText, Btn Secondary Text

HEX#2f3b16

RGB47, 59, 22

HSL79, 46, 16

CMYK20, 0, 63, 77

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Grass Green", "hex": "#5829B6", "role": "main", "cmyk": { "c": 52, "m": 77, "y": 0, "k": 29, "source": "colorfly" } }, { "name": "Lime Green", "hex": "#F5F5EF", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 2, "k": 4, "source": "colorfly" } }, { "name": "Yellow-Green", "hex": "#FD5411", "role": "main", "cmyk": { "c": 0, "m": 67, "y": 93, "k": 1, "source": "colorfly" } }, { "name": "Olive Green", "hex": "#5C9A31", "role": "support", "cmyk": { "c": 40, "m": 0, "y": 68, "k": 40, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Pale Lime", "hex": "#F2F9D4", "role": "neutral", "cmyk": { "c": 3, "m": 0, "y": 15, "k": 2, "source": "colorfly" } }, { "name": "Dark Olive", "hex": "#2F3B16", "role": "neutral", "cmyk": { "c": 20, "m": 0, "y": 63, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-grass-green: #5829B6; --color-lime-green: #F5F5EF; --color-yellow-green: #FD5411; --color-olive-green: #5c9a31; --color-white: #ffffff; --color-pale-lime: #f2f9d4; --color-dark-olive: #2f3b16; }

:root { --role-logo: #5829B6; --role-link: #5829B6; --role-btn-primary-bg: #5829B6; --role-headline: #5829B6; --role-btn-secondary-bg: #F5F5EF; --role-btn-outlined-border: #F5F5EF; --role-btn-outlined-text: #F5F5EF; --role-bg-dark: #FD5411; --role-icon: #5c9a31; --role-border: #5c9a31; --role-divider: #5c9a31; --role-outline: #5c9a31; --role-bg-light: #ffffff; --role-btn-primary-text: #ffffff; --role-text: #2f3b16; --role-btn-secondary-text: #2f3b16; }

{ "grass-green": "#5829B6", "lime-green": "#F5F5EF", "yellow-green": "#FD5411", "olive-green": "#5c9a31", "white": "#ffffff", "pale-lime": "#f2f9d4", "dark-olive": "#2f3b16" }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #5829B6; --gradient-partner: #A389D7; --gradient-accent: #5C9A31; --gradient-text: #FFFFFF; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #5829B6; --gradient-text-b: #A389D7; --gradient-text-c: #5C9A31; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>