Cocoa and Ivory Luxury Color Palette for Package and Branding Design...

Cocoa Ivory Luxury Color Palette

This luxury palette combines deep Cocoa and soft Ivory as main anchors to convey elegance and sophistication without gold or sand tones. Muted Slate and Dusty Lavender support the brand with subtle color extensions that enhance depth and refinement, while strong neutral off-white, light pearl, and dark charcoal create contrast and legibility across packaging and brand elements.

MonochromaticLuxury And Lifestyleluxuryelegantpackagingbranding

Main (Brand) Colors

Cocoa and Ivory anchor the palette with warm luxury tones that harmonize for a recognizable, refined system. These mostly neutral browns complemented by soft muted hues form an elegant and sophisticated identity.

PrimaryCocoa Brown

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

Cocoa Brown projects richness and understated luxury to form a strong, grounded brand foundation.

HEX#6b5e53

RGB107, 94, 83

HSL28, 13, 37

CMYK0, 12, 22, 58

SecondaryIvory

RolesBg Light, Btn Secondary Bg

Ivory provides a soft, luxurious backdrop evoking sophistication and calmness without harshness.

HEX#f9f6f2

RGB249, 246, 242

HSL34, 37, 96

CMYK0, 1, 3, 2

TertiaryDusty Lavender

Dusty Lavender adds subtle refinement and muted elegance that gently extends the main palette's warmth.

HEX#8a7f87

RGB138, 127, 135

HSL316, 4, 52

CMYK0, 8, 2, 46

Support Colors

Slate and Dusty Lavender are muted and subdued accents that add dimension and balance to the palette without overpowering the main luxury tones.

Slate Gray

RolesIcon, Border, Divider, Outline

Slate Gray complements Cocoa Brown by offering a cool, neutral contrast for edges and small graphic elements that anchors the brand visually.

HEX#7c7a81

RGB124, 122, 129

HSL257, 3, 49

CMYK4, 5, 0, 49

Dusty Lavender

Dusty Lavender gently enhances the palette with a quiet, elegant hue that balances warmth and depth in support accents.

HEX#8a7f87

RGB138, 127, 135

HSL316, 4, 52

CMYK0, 8, 2, 46

Neutral Colors

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

Ivory

RolesBtn Primary Text

HEX#f9f6f2

RGB249, 246, 242

HSL34, 37, 96

CMYK0, 1, 3, 2

Pearl

HEX#e7e3df

RGB231, 227, 223

HSL30, 14, 89

CMYK0, 2, 3, 9

Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#2e2a28

RGB46, 42, 40

HSL20, 7, 17

CMYK0, 9, 13, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Cocoa Brown", "hex": "#6B5E53", "role": "main", "cmyk": { "c": 0, "m": 12, "y": 22, "k": 58, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F9F6F2", "role": "main", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 2, "source": "colorfly" } }, { "name": "Dusty Lavender", "hex": "#8A7F87", "role": "main", "cmyk": { "c": 0, "m": 8, "y": 2, "k": 46, "source": "colorfly" } }, { "name": "Slate Gray", "hex": "#7C7A81", "role": "support", "cmyk": { "c": 4, "m": 5, "y": 0, "k": 49, "source": "colorfly" } }, { "name": "Dusty Lavender", "hex": "#8A7F87", "role": "support", "cmyk": { "c": 0, "m": 8, "y": 2, "k": 46, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F9F6F2", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 2, "source": "colorfly" } }, { "name": "Pearl", "hex": "#E7E3DF", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 3, "k": 9, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2E2A28", "role": "neutral", "cmyk": { "c": 0, "m": 9, "y": 13, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --role-logo: #6b5e53; --role-link: #6b5e53; --role-btn-primary-bg: #6b5e53; --role-btn-outlined-border: #6b5e53; --role-btn-outlined-text: #6b5e53; --role-headline: #6b5e53; --role-bg-light: #f9f6f2; --role-btn-secondary-bg: #f9f6f2; --role-icon: #7c7a81; --role-border: #7c7a81; --role-divider: #7c7a81; --role-outline: #7c7a81; --role-btn-primary-text: #f9f6f2; --role-bg-dark: #2e2a28; --role-text: #2e2a28; --role-btn-secondary-text: #2e2a28; }

<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: #6B5E53; --gradient-partner: #AEA6A0; --gradient-accent: #7C7A81; --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: #6B5E53; --gradient-text-b: #AEA6A0; --gradient-text-c: #7C7A81; 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>

Cocoa Ivory Luxury Color Palette

Cocoa Ivory Luxury 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

Cocoa Ivory Luxury 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