Orange Green Fresh Color Palette for Food & Beverage Brands

Orange Green Fresh Color Palette

This palette draws inspiration from the fresh and vibrant tones of a ripe orange with a green leaf, creating a lively and approachable system that balances warmth and natural freshness. It uses three main colors rooted in the orange and green hues of the fruit, complemented by softer supporting shades that add depth without competing visually, anchored by three neutrals for contrast and readability.

AnalogousFood Beverageorangegreenfreshfruit

Main (Brand) Colors

Three main colors form a split complementary arrangement that balances the warm orange hues with fresh green tones, producing a pleasing visual contrast that is energetic yet natural.

PrimaryPrinceton Orange

RolesLogo, Link, Btn Primary Bg

Princeton Orange offers vibrant energy and warmth, evoking feelings of enthusiasm and appetizing freshness.

HEX#FF7F11

RGB255, 127, 17

HSL28, 100, 53

CMYK0, 50, 93, 0

SecondaryFern Green

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Fern Green introduces a calm, natural balance, emphasizing growth, health, and earthiness complementary to the orange.

HEX#4B772E

RGB75, 119, 46

HSL96, 44, 32

CMYK37, 0, 61, 53

TertiaryPumpkin Orange

RolesHeadline

Pumpkin Orange adds richness and depth, reinforcing the warmth and inviting spirit within the main orange family.

HEX#E8630A

RGB232, 99, 10

HSL24, 92, 47

CMYK0, 57, 96, 9

Support Colors

Support colors extend the palette with muted amber and olive tones that harmonize softly with the main hues, providing subtle visual interest in icons, borders, and dividers without overwhelming the core message.

Amber

RolesIcon, Border, Divider, Outline

Amber deepens the warmth subtly, complementing the oranges with a grounded, natural accent.

HEX#B76E14

RGB183, 110, 20

HSL33, 80, 40

CMYK0, 40, 89, 28

Olive Green

Olive Green supports the primary green with a more subdued tone, maintaining harmony and usability in interface elements.

HEX#6E8543

RGB110, 133, 67

HSL81, 33, 39

CMYK17, 0, 50, 48

Neutral Colors

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

White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Cultured

RolesBg Dark

HEX#F4F4F4

RGB244, 244, 244

HSL0, 0, 96

CMYK0, 0, 0, 4

Jet

RolesText, Btn Primary Text

HEX#2E2E2E

RGB46, 46, 46

HSL0, 0, 18

CMYK0, 0, 0, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Princeton Orange", "hex": "#FF7F11", "role": "main", "cmyk": { "c": 0, "m": 50, "y": 93, "k": 0, "source": "colorfly" } }, { "name": "Fern Green", "hex": "#4B772E", "role": "main", "cmyk": { "c": 37, "m": 0, "y": 61, "k": 53, "source": "colorfly" } }, { "name": "Pumpkin Orange", "hex": "#E8630A", "role": "main", "cmyk": { "c": 0, "m": 57, "y": 96, "k": 9, "source": "colorfly" } }, { "name": "Amber", "hex": "#B76E14", "role": "support", "cmyk": { "c": 0, "m": 40, "y": 89, "k": 28, "source": "colorfly" } }, { "name": "Olive Green", "hex": "#6E8543", "role": "support", "cmyk": { "c": 17, "m": 0, "y": 50, "k": 48, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Cultured", "hex": "#F4F4F4", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Jet", "hex": "#2E2E2E", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-princeton-orange: #FF7F11; --color-fern-green: #4B772E; --color-pumpkin-orange: #E8630A; --color-amber: #B76E14; --color-olive-green: #6E8543; --color-white: #FFFFFF; --color-cultured: #F4F4F4; --color-jet: #2E2E2E; }

:root { --role-logo: #FF7F11; --role-link: #FF7F11; --role-btn-primary-bg: #FF7F11; --role-btn-secondary-bg: #4B772E; --role-btn-outlined-border: #4B772E; --role-btn-outlined-text: #4B772E; --role-headline: #E8630A; --role-icon: #B76E14; --role-border: #B76E14; --role-divider: #B76E14; --role-outline: #B76E14; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F4F4F4; --role-text: #2E2E2E; --role-btn-primary-text: #2E2E2E; }

{ "princeton-orange": "#FF7F11", "fern-green": "#4B772E", "pumpkin-orange": "#E8630A", "amber": "#B76E14", "olive-green": "#6E8543", "white": "#FFFFFF", "cultured": "#F4F4F4", "jet": "#2E2E2E" }

<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: #FF7F11; --gradient-partner: #FFA558; --gradient-accent: #B76E14; --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: #FF7F11; --gradient-text-b: #8A5930; --gradient-text-c: #B76E14; 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>