Terracotta Ivory Architectural Color Palette for Mediterranean Style...

Terracotta Ivory Architectural Color Palette

This palette draws from the warm terracotta tones and the classic ivory columns in the image, creating a distinctive Mediterranean-inspired color system. The complementary interplay of warm burnt orange and soft ivory accents evokes architectural elegance balanced with inviting warmth, supported by gentle muted browns for detail and classic neutrals to ground the design.

MonochromaticHospitality Eventsterracottaivorymediterraneanarchitecture

Main (Brand) Colors

The main colors form a warm complementary duo pairing a rich terracotta orange with a soft ivory hue, creating a harmonious and inviting Mediterranean aesthetic.

PrimaryBurnt Orange

RolesLogo, Link, Btn Primary Bg

Burnt Orange conveys warmth and vitality, echoing the iconic terracotta walls and injecting energetic friendliness into the brand.

HEX#D05C2F

RGB208, 92, 47

HSL17, 63, 50

CMYK0, 56, 77, 18

SecondaryIvory

RolesBtn Outlined Border, Btn Outlined Text, Headline, Btn Secondary Bg

Ivory provides softness and timeless elegance, inspired by the classical columns, balancing the vibrancy of Burnt Orange.

HEX#F3E8D3

RGB243, 232, 211

HSL39, 57, 89

CMYK0, 5, 13, 5

Support Colors

Support colors include muted browns that extend the palette with subtle depth and complement the main colors, reinforcing the architectural theme without overpowering.

Muted Taupe

RolesIcon, Border, Divider, Outline

Muted Taupe functions as a neutral brown that grounds the palette with understated warmth, complementing both main hues.

HEX#A78963

RGB167, 137, 99

HSL34, 28, 52

CMYK0, 18, 41, 35

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

Near-White

RolesBg Dark

HEX#F9F7F1

RGB249, 247, 241

HSL45, 40, 96

CMYK0, 1, 3, 2

Charcoal Brown

RolesText, Btn Secondary Text

HEX#4B4237

RGB75, 66, 55

HSL33, 15, 25

CMYK0, 12, 27, 71

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Burnt Orange", "hex": "#D05C2F", "role": "main", "cmyk": { "c": 0, "m": 56, "y": 77, "k": 18, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F3E8D3", "role": "main", "cmyk": { "c": 0, "m": 5, "y": 13, "k": 5, "source": "colorfly" } }, { "name": "Muted Taupe", "hex": "#A78963", "role": "support", "cmyk": { "c": 0, "m": 18, "y": 41, "k": 35, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Near-White", "hex": "#F9F7F1", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 2, "source": "colorfly" } }, { "name": "Charcoal Brown", "hex": "#4B4237", "role": "neutral", "cmyk": { "c": 0, "m": 12, "y": 27, "k": 71, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --role-logo: #D05C2F; --role-link: #D05C2F; --role-btn-primary-bg: #D05C2F; --role-btn-outlined-border: #F3E8D3; --role-btn-outlined-text: #F3E8D3; --role-headline: #F3E8D3; --role-btn-secondary-bg: #F3E8D3; --role-icon: #A78963; --role-border: #A78963; --role-divider: #A78963; --role-outline: #A78963; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F9F7F1; --role-text: #4B4237; --role-btn-secondary-text: #4B4237; }

<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: #D05C2F; --gradient-partner: #E5A58D; --gradient-accent: #A78963; --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: #D05C2F; --gradient-text-b: #7C594C; --gradient-text-c: #A78963; 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>