Espresso Terracotta Caramel Color Palette for Italian Coffee Shop

Espresso Terracotta Caramel Color Palette

This palette captures the warmth, sophistication, and joyful essence of Italian coffee culture with a harmonious blend of rich espresso tones and soft, dessert-inspired accents, grounded by practical neutrals for versatile application.

AnalogousFood Beverageitaliancoffeewarmespresso

Main (Brand) Colors

The main colors blend warm coffee-inspired hues to evoke authentic Italian coffee moments, balancing rich depth with inviting vibrance for brand recognition.

PrimaryEspresso

RolesLogo, Btn Primary Bg, Btn Outlined Border

Espresso communicates richness and authenticity, anchoring the brand with deep and trustworthy coffee tones.

HEX#4B2E2E

RGB75, 46, 46

HSL0, 24, 24

CMYK0, 39, 39, 71

SecondaryTerracotta

RolesBtn Secondary Bg, Link, Btn Outlined Text

Terracotta brings warmth and energy, embodying the rustic Italian feel and lively coffee culture.

HEX#D05A32

RGB208, 90, 50

HSL15, 63, 51

CMYK0, 57, 76, 18

TertiaryCaramel

RolesHeadline

Caramel adds a sweet, comforting touch reminiscent of Italian sweets and cozy coffee moments.

HEX#C88A54

RGB200, 138, 84

HSL28, 51, 56

CMYK0, 31, 58, 22

Support Colors

Support colors extend the warmth and organic feel, with muted earthy tones that balance the vibrant main colors without overpowering.

Sandy Brown

RolesIcon, Border, Divider, Outline

Sandy Brown introduces approachable softness and balances the palette with a subtle earthy grounding.

HEX#A17A50

RGB161, 122, 80

HSL31, 34, 47

CMYK0, 24, 50, 37

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

RolesBg Dark

HEX#F5F0EB

RGB245, 240, 235

HSL30, 33, 94

CMYK0, 2, 4, 4

Charcoal

RolesText

HEX#2B2B28

RGB43, 43, 40

HSL60, 4, 16

CMYK0, 0, 7, 83

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Espresso", "hex": "#4B2E2E", "role": "main", "cmyk": { "c": 0, "m": 39, "y": 39, "k": 71, "source": "colorfly" } }, { "name": "Terracotta", "hex": "#D05A32", "role": "main", "cmyk": { "c": 0, "m": 57, "y": 76, "k": 18, "source": "colorfly" } }, { "name": "Caramel", "hex": "#C88A54", "role": "main", "cmyk": { "c": 0, "m": 31, "y": 58, "k": 22, "source": "colorfly" } }, { "name": "Sandy Brown", "hex": "#A17A50", "role": "support", "cmyk": { "c": 0, "m": 24, "y": 50, "k": 37, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F5F0EB", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 4, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2B2B28", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 7, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-espresso: #4B2E2E; --color-terracotta: #D05A32; --color-caramel: #C88A54; --color-sandy-brown: #A17A50; --color-white: #FFFFFF; --color-ivory: #F5F0EB; --color-charcoal: #2B2B28; }

:root { --role-logo: #4B2E2E; --role-btn-primary-bg: #4B2E2E; --role-btn-outlined-border: #4B2E2E; --role-btn-secondary-bg: #D05A32; --role-link: #D05A32; --role-btn-outlined-text: #D05A32; --role-headline: #C88A54; --role-icon: #A17A50; --role-border: #A17A50; --role-divider: #A17A50; --role-outline: #A17A50; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F5F0EB; --role-text: #2B2B28; }

<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: #4B2E2E; --gradient-partner: #9C8C8C; --gradient-accent: #A17A50; --gradient-text: #FFFFFF; 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: #4B2E2E; --gradient-text-b: #9C8C8C; --gradient-text-c: #A17A50; 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>