Lime Green Fresh Color Palette for Tech Brands

Lime Green Fresh Color Palette

This palette draws inspiration from the vibrant and fresh greens with a balance of soft yellows and grounded neutrals to deliver a lively yet professional brand identity. The main greens evoke growth and energy, while the support colors provide warmth and balance, complemented by clean neutrals that ensure strong readability and interface clarity.

AnalogousTechlime greenfreshvibranttech

Main (Brand) Colors

The main colors form an analogous harmony of lively greens and a warm yellow, creating a fresh and energetic color system that is easy to recognize and reinforces themes of growth and innovation.

PrimaryLime Green

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Lime Green brings energy and a sense of growth, making it ideal for logos and primary brand expressions.

HEX#65C466

RGB101, 196, 102

HSL121, 45, 58

CMYK48, 0, 48, 23

SecondaryYellow Green

RolesBtn Secondary Bg

Yellow Green adds warmth and complements the primary, softening the palette and providing versatile accents.

HEX#AAD357

RGB170, 211, 87

HSL80, 58, 58

CMYK19, 0, 59, 17

TertiaryForest Green

Forest Green deepens the palette with a grounded tone that balances brightness and provides visual weight.

HEX#379134

RGB55, 145, 52

HSL118, 47, 39

CMYK62, 0, 64, 43

Support Colors

The support colors extend the main palette with soft, muted hues that emphasize usability and visual calm, without distracting from the main vibrant greens.

Sage Green

RolesIcon, Border, Divider, Outline

Sage Green offers a subdued and harmonious support tone that balances the vibrant main colors softly.

HEX#A8D59F

RGB168, 213, 159

HSL110, 39, 73

CMYK21, 0, 25, 16

Pale Lime

Pale Lime adds a gentle highlight and lightness to backgrounds and subtle UI elements without overwhelming.

HEX#D6E69F

RGB214, 230, 159

HSL74, 59, 76

CMYK7, 0, 31, 10

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ghost White

HEX#F6F6F6

RGB246, 246, 246

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#242424

RGB36, 36, 36

HSL0, 0, 14

CMYK0, 0, 0, 86

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Lime Green", "hex": "#65C466", "role": "main", "cmyk": { "c": 48, "m": 0, "y": 48, "k": 23, "source": "colorfly" } }, { "name": "Yellow Green", "hex": "#AAD357", "role": "main", "cmyk": { "c": 19, "m": 0, "y": 59, "k": 17, "source": "colorfly" } }, { "name": "Forest Green", "hex": "#379134", "role": "main", "cmyk": { "c": 62, "m": 0, "y": 64, "k": 43, "source": "colorfly" } }, { "name": "Sage Green", "hex": "#A8D59F", "role": "support", "cmyk": { "c": 21, "m": 0, "y": 25, "k": 16, "source": "colorfly" } }, { "name": "Pale Lime", "hex": "#D6E69F", "role": "support", "cmyk": { "c": 7, "m": 0, "y": 31, "k": 10, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ghost White", "hex": "#F6F6F6", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#242424", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 86, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-lime-green: #65C466; --color-yellow-green: #AAD357; --color-forest-green: #379134; --color-sage-green: #A8D59F; --color-pale-lime: #D6E69F; --color-pure-white: #FFFFFF; --color-ghost-white: #F6F6F6; --color-charcoal: #242424; }

:root { --role-logo: #65C466; --role-link: #65C466; --role-btn-primary-bg: #65C466; --role-btn-outlined-border: #65C466; --role-btn-outlined-text: #65C466; --role-headline: #65C466; --role-btn-secondary-bg: #AAD357; --role-icon: #A8D59F; --role-border: #A8D59F; --role-divider: #A8D59F; --role-outline: #A8D59F; --role-bg-light: #FFFFFF; --role-bg-dark: #242424; --role-text: #242424; --role-btn-primary-text: #242424; --role-btn-secondary-text: #242424; }

{ "lime-green": "#65C466", "yellow-green": "#AAD357", "forest-green": "#379134", "sage-green": "#A8D59F", "pale-lime": "#D6E69F", "pure-white": "#FFFFFF", "ghost-white": "#F6F6F6", "charcoal": "#242424" }

<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: #65C466; --gradient-partner: #93D694; --gradient-accent: #A8D59F; --gradient-text: #000000; 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: #376A37; --gradient-text-b: #4F7450; --gradient-text-c: #5B7356; 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>