Fresh Green Technology Color Palette for E-commerce Branding

Fresh Green Technology Color Palette

This palette uses vibrant and fresh greens inspired by the image's lively tone, supplemented by calming blue and neutral colors for versatility and clarity. The main colors harmonize distinctiveness with approachability in branding, while the support colors provide subtle accents that stabilize the visual impact without competing for attention. The neutrals ensure readability and balance across backgrounds and text.

AnalogousEcommercegreenfreshtechnologyecommerce

Main (Brand) Colors

The main colors are bright, lively greens that create a recognizable system reflecting innovation and natural energy.

PrimaryLime Green

RolesLogo, Link, Btn Primary Bg

Lime Green conveys growth, freshness, and forward-thinking technology.

HEX#41CF3D

RGB65, 207, 61

HSL118, 60, 53

CMYK69, 0, 71, 19

SecondaryForest Green

RolesBtn Secondary Bg, Headline

Forest Green adds a grounding natural tone, balancing vibrancy with trust and stability.

HEX#1B9E2F

RGB27, 158, 47

HSL129, 71, 36

CMYK83, 0, 70, 38

TertiarySky Blue

RolesBtn Outlined Border, Btn Outlined Text

Sky Blue offers fresh contrast as an accent, evoking clarity and calmness while complementing the greens.

HEX#47B6E8

RGB71, 182, 232

HSL199, 78, 59

CMYK69, 22, 0, 9

Support Colors

The support colors provide subtle accents that complement the main greens and blue, enhancing the palette's friendliness and legibility without overpowering the main hues.

Sage Green

RolesIcon, Border, Divider, Outline

Sage Green serves as a muted, natural accent that balances the vivid main greens and adds depth.

HEX#8ACB70

RGB138, 203, 112

HSL103, 47, 62

CMYK32, 0, 45, 20

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Cultured

RolesBg Dark

HEX#F6F8FA

RGB246, 248, 250

HSL210, 29, 97

CMYK2, 1, 0, 2

Jet

RolesText, Btn Primary Text, Btn Secondary Text

HEX#313131

RGB49, 49, 49

HSL0, 0, 19

CMYK0, 0, 0, 81

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Lime Green", "hex": "#41CF3D", "role": "main", "cmyk": { "c": 69, "m": 0, "y": 71, "k": 19, "source": "colorfly" } }, { "name": "Forest Green", "hex": "#1B9E2F", "role": "main", "cmyk": { "c": 83, "m": 0, "y": 70, "k": 38, "source": "colorfly" } }, { "name": "Sky Blue", "hex": "#47B6E8", "role": "main", "cmyk": { "c": 69, "m": 22, "y": 0, "k": 9, "source": "colorfly" } }, { "name": "Sage Green", "hex": "#8ACB70", "role": "support", "cmyk": { "c": 32, "m": 0, "y": 45, "k": 20, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Cultured", "hex": "#F6F8FA", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Jet", "hex": "#313131", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 81, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-lime-green: #41CF3D; --color-forest-green: #1B9E2F; --color-sky-blue: #47B6E8; --color-sage-green: #8ACB70; --color-white: #FFFFFF; --color-cultured: #F6F8FA; --color-jet: #313131; }

:root { --role-logo: #41CF3D; --role-link: #41CF3D; --role-btn-primary-bg: #41CF3D; --role-btn-secondary-bg: #1B9E2F; --role-headline: #1B9E2F; --role-btn-outlined-border: #47B6E8; --role-btn-outlined-text: #47B6E8; --role-icon: #8ACB70; --role-border: #8ACB70; --role-divider: #8ACB70; --role-outline: #8ACB70; --role-bg-light: #FFFFFF; --role-bg-dark: #F6F8FA; --role-text: #313131; --role-btn-primary-text: #313131; --role-btn-secondary-text: #313131; }

<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: #41CF3D; --gradient-partner: #7ADD77; --gradient-accent: #5AA458; --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: #237021; --gradient-text-b: #427740; --gradient-text-c: #5AA458; 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>