Terracotta Architecture Earthy Color Palette for Real Estate Branding...

Terracotta Architecture Earthy Color Palette

This palette is inspired by the warm terracotta tones of the building combined with the muted greens of the surrounding foliage and the soft sky. The main colors evoke a strong architectural presence with classic elegance, while the support colors extend the palette through natural earthy accents. The neutrals provide a balanced base for text and backgrounds ensuring clear readability and visual comfort.

AnalogousReal Estateterracottaarchitectureearthygreen

Main (Brand) Colors

The main colors consist of terracotta, warm brick red, and muted olive green, creating a harmonious yet vibrant triad that reflects architectural strength and natural balance.

PrimaryTerracotta

RolesLogo, Link, Btn Primary Bg

Terracotta provides a warm, inviting presence with a strong architectural feel suitable for brand recognition.

HEX#D97448

RGB217, 116, 72

HSL18, 66, 57

CMYK0, 47, 67, 15

SecondaryBrick Red

RolesBtn Secondary Bg, Headline

Brick Red adds depth and richness, reinforcing a sense of tradition and stability.

HEX#B74927

RGB183, 73, 39

HSL14, 65, 44

CMYK0, 60, 79, 28

TertiaryMuted Olive

RolesBtn Outlined Border, Btn Outlined Text

Muted Olive offers a natural balance, complementing the warm reds with a grounding earthy tone.

HEX#61734B

RGB97, 115, 75

HSL87, 21, 37

CMYK16, 0, 35, 55

Support Colors

Support colors extend the palette with softer, desaturated palettes of green and beige that complement and balance the strong main colors without competing for attention.

Warm Beige

RolesIcon, Border, Divider, Outline

Warm Beige softly supports the palette by bringing neutral earthiness that lightens and balances the overall warmth.

HEX#C2B99E

RGB194, 185, 158

HSL45, 23, 69

CMYK0, 5, 19, 24

Sage Green

RolesBg Light, Bg Dark

Sage Green enhances the natural vibe of the palette by providing muted greenery tones that amplify calmness and readability.

HEX#8C9980

RGB140, 153, 128

HSL91, 11, 55

CMYK8, 0, 16, 40

Neutral Colors

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

White

RolesBtn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Cream

HEX#F5F3F0

RGB245, 243, 240

HSL36, 20, 95

CMYK0, 1, 2, 4

Charcoal

RolesText, Btn Primary Text

HEX#2F2F2F

RGB47, 47, 47

HSL0, 0, 18

CMYK0, 0, 0, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Terracotta", "hex": "#D97448", "role": "main", "cmyk": { "c": 0, "m": 47, "y": 67, "k": 15, "source": "colorfly" } }, { "name": "Brick Red", "hex": "#B74927", "role": "main", "cmyk": { "c": 0, "m": 60, "y": 79, "k": 28, "source": "colorfly" } }, { "name": "Muted Olive", "hex": "#61734B", "role": "main", "cmyk": { "c": 16, "m": 0, "y": 35, "k": 55, "source": "colorfly" } }, { "name": "Warm Beige", "hex": "#C2B99E", "role": "support", "cmyk": { "c": 0, "m": 5, "y": 19, "k": 24, "source": "colorfly" } }, { "name": "Sage Green", "hex": "#8C9980", "role": "support", "cmyk": { "c": 8, "m": 0, "y": 16, "k": 40, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Cream", "hex": "#F5F3F0", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 2, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2F2F2F", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-terracotta: #D97448; --color-brick-red: #B74927; --color-muted-olive: #61734B; --color-warm-beige: #C2B99E; --color-sage-green: #8C9980; --color-white: #FFFFFF; --color-cream: #F5F3F0; --color-charcoal: #2F2F2F; }

:root { --role-logo: #D97448; --role-link: #D97448; --role-btn-primary-bg: #D97448; --role-btn-secondary-bg: #B74927; --role-headline: #B74927; --role-btn-outlined-border: #61734B; --role-btn-outlined-text: #61734B; --role-icon: #C2B99E; --role-border: #C2B99E; --role-divider: #C2B99E; --role-outline: #C2B99E; --role-bg-light: #8C9980; --role-bg-dark: #8C9980; --role-btn-secondary-text: #FFFFFF; --role-text: #2F2F2F; --role-btn-primary-text: #2F2F2F; }

{ "terracotta": "#D97448", "brick-red": "#B74927", "muted-olive": "#61734B", "warm-beige": "#C2B99E", "sage-green": "#8C9980", "white": "#FFFFFF", "cream": "#F5F3F0", "charcoal": "#2F2F2F" }

<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: #D97448; --gradient-partner: #EAB39A; --gradient-accent: #C2B99E; --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: #D97448; --gradient-text-b: #7E6153; --gradient-text-c: #696455; 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>