Fresh Green Color Palette for Environmental and Health Wellness Brand...

Fresh Green Environmental Color Palette

This palette draws inspiration from fresh and vibrant shades of green balanced with calming blue and sunny yellow accents, evoking a harmonious natural vibe. It utilizes a complementary color scheme with primary greens and a contrasting warm yellow, supported by cooler blues to create balance and brand versatility.

CustomHealth Wellnessgreenfreshenvironmentalnatural

Main (Brand) Colors

The main colors combine vibrant leafy greens and a warm golden yellow to create energy and recognition, balanced by a cool blue for contrast and harmony.

PrimaryForest Green

RolesLogo, Link, Btn Primary Bg

Forest Green embodies growth, vitality, and trust, making it effective for logo and primary interaction colors.

HEX#017D3A

RGB1, 125, 58

HSL148, 98, 25

CMYK99, 0, 54, 51

SecondaryGoldenrod

RolesBtn Secondary Bg, Headline

Goldenrod adds warmth and optimism while providing a distinct, complementary background for secondary actions.

HEX#55BEE6

RGB85, 190, 230

HSL197, 74, 62

CMYK63, 17, 0, 10

TertiaryTeal Blue

RolesBtn Outlined Border, Btn Outlined Text

Teal Blue supports the main palette by offering a calm and sophisticated contrast that grounds the vibrant greens and yellows.

HEX#CDE5B4

RGB205, 229, 180

HSL89, 49, 80

CMYK10, 0, 21, 10

Support Colors

The support colors extend the main palette with soft natural tones and muted blues that complement the primary greens and yellow without competing for attention.

Sage Green

RolesIcon, Border, Divider

Sage Green offers a subtle earthy tone that complements Forest Green by softening the overall palette.

HEX#096B32

RGB9, 107, 50

HSL145, 84, 23

CMYK92, 0, 53, 58

Light Steel Blue

Light Steel Blue enhances the teal blue by providing a lighter tone for auxiliary interface elements.

HEX#2D4A5E

RGB45, 74, 94

HSL204, 35, 27

CMYK52, 21, 0, 63

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

Ivory

RolesOutline

HEX#F0F1EA

RGB240, 241, 234

HSL69, 20, 93

CMYK0, 0, 3, 5

Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#212720

RGB33, 39, 32

HSL111, 10, 14

CMYK15, 0, 18, 85

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Forest Green", "hex": "#017D3A", "role": "main", "cmyk": { "c": 99, "m": 0, "y": 54, "k": 51, "source": "colorfly" } }, { "name": "Goldenrod", "hex": "#55BEE6", "role": "main", "cmyk": { "c": 63, "m": 17, "y": 0, "k": 10, "source": "colorfly" } }, { "name": "Teal Blue", "hex": "#CDE5B4", "role": "main", "cmyk": { "c": 10, "m": 0, "y": 21, "k": 10, "source": "colorfly" } }, { "name": "Sage Green", "hex": "#096B32", "role": "support", "cmyk": { "c": 92, "m": 0, "y": 53, "k": 58, "source": "colorfly" } }, { "name": "Light Steel Blue", "hex": "#2D4A5E", "role": "support", "cmyk": { "c": 52, "m": 21, "y": 0, "k": 63, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F0F1EA", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 3, "k": 5, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#212720", "role": "neutral", "cmyk": { "c": 15, "m": 0, "y": 18, "k": 85, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-forest-green: #017D3A; --color-goldenrod: #55BEE6; --color-teal-blue: #CDE5B4; --color-sage-green: #096B32; --color-light-steel-blue: #2D4A5E; --color-white: #FFFFFF; --color-ivory: #F0F1EA; --color-charcoal: #212720; }

:root { --role-logo: #017D3A; --role-link: #017D3A; --role-btn-primary-bg: #017D3A; --role-btn-secondary-bg: #55BEE6; --role-headline: #55BEE6; --role-btn-outlined-border: #CDE5B4; --role-btn-outlined-text: #CDE5B4; --role-icon: #096B32; --role-border: #096B32; --role-divider: #096B32; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-outline: #F0F1EA; --role-bg-dark: #212720; --role-text: #212720; --role-btn-secondary-text: #212720; }

{ "forest-green": "#017D3A", "goldenrod": "#55BEE6", "teal-blue": "#CDE5B4", "sage-green": "#096B32", "light-steel-blue": "#2D4A5E", "white": "#FFFFFF", "ivory": "#F0F1EA", "charcoal": "#212720" }

<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: #017D3A; --gradient-partner: #73B893; --gradient-accent: #096B32; --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: #017D3A; --gradient-text-b: #73B893; --gradient-text-c: #096B32; 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>

Fresh Green Environmental Color Palette

Fresh Green Environmental Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Fresh Green Environmental Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system