Emerald Gold Crimson Color Palette for Food & Beverage Brands

Emerald Gold Crimson Color Palette

This palette draws from the vibrant greens, warm golds, and lively reds in the image, balanced with neutral shades for text and backgrounds. It creates a harmonious yet energetic brand color system suited for food and beverage or hospitality brands looking to convey freshness, warmth, and appetizing appeal.

ComplementaryFood Beverageemeraldgoldcrimsonfresh

Main (Brand) Colors

The main colors consist of a rich emerald green, a warm gold, and a vibrant crimson red, offering a dynamic and memorable system that balances cool and warm tones.

PrimaryEmerald

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

Emerald conveys freshness and natural vitality, representing growth and renewal.

HEX#1C6B49

RGB28, 107, 73

HSL154, 59, 26

CMYK74, 0, 32, 58

SecondaryGold

RolesBtn Secondary Bg, Headline

Gold adds warmth and a premium feel, evoking richness and quality.

HEX#B57A11

RGB181, 122, 17

HSL38, 83, 39

CMYK0, 33, 91, 29

TertiaryCrimson

Crimson introduces energetic passion and appetite appeal, stimulating excitement and attention.

HEX#CA2028

RGB202, 32, 40

HSL357, 73, 46

CMYK0, 84, 80, 21

Support Colors

Support colors amplify the main palette with earthy and muted green and red tones that provide depth and subtlety without overpowering the primary colors.

Sage

RolesIcon, Border, Divider, Outline

Sage complements Emerald by offering a softer, muted green that balances vibrancy with calmness.

HEX#F7F8F7

RGB247, 248, 247

HSL120, 7, 97

CMYK0, 0, 0, 3

Rust

Rust complements Crimson by providing a deep, earthy tone that grounds the boldness with warmth.

HEX#171C1A

RGB23, 28, 26

HSL156, 10, 10

CMYK18, 0, 7, 89

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

HEX#F3F3F3

RGB243, 243, 243

HSL0, 0, 95

CMYK0, 0, 0, 5

Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#1B1B1B

RGB27, 27, 27

HSL0, 0, 11

CMYK0, 0, 0, 89

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Emerald", "hex": "#1C6B49", "role": "main", "cmyk": { "c": 74, "m": 0, "y": 32, "k": 58, "source": "colorfly" } }, { "name": "Gold", "hex": "#B57A11", "role": "main", "cmyk": { "c": 0, "m": 33, "y": 91, "k": 29, "source": "colorfly" } }, { "name": "Crimson", "hex": "#CA2028", "role": "main", "cmyk": { "c": 0, "m": 84, "y": 80, "k": 21, "source": "colorfly" } }, { "name": "Sage", "hex": "#F7F8F7", "role": "support", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Rust", "hex": "#171C1A", "role": "support", "cmyk": { "c": 18, "m": 0, "y": 7, "k": 89, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F3F3F3", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 5, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1B1B1B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 89, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-emerald: #1C6B49; --color-gold: #B57A11; --color-crimson: #CA2028; --color-sage: #F7F8F7; --color-rust: #171C1A; --color-white: #FFFFFF; --color-ivory: #F3F3F3; --color-charcoal: #1B1B1B; }

:root { --role-logo: #1C6B49; --role-link: #1C6B49; --role-btn-primary-bg: #1C6B49; --role-btn-outlined-border: #1C6B49; --role-btn-outlined-text: #1C6B49; --role-btn-secondary-bg: #B57A11; --role-headline: #B57A11; --role-icon: #F7F8F7; --role-border: #F7F8F7; --role-divider: #F7F8F7; --role-outline: #F7F8F7; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #1B1B1B; --role-text: #1B1B1B; --role-btn-secondary-text: #1B1B1B; }

<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: #1C6B49; --gradient-partner: #82AE9B; --gradient-accent: #F7F8F7; --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: #1C6B49; --gradient-text-b: #82AE9B; --gradient-text-c: #949594; 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>