Terracotta#D97448
Brick Red#B74927
Muted Olive#61734B
Warm Beige#C2B99E
Sage Green#8C9980
Palette direction

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
palette-preview.example
Real Estate color direction

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.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo White #FFFFFFon Brick Red #B749275.3:1 Strong
Logo White #FFFFFFon Muted Olive #61734B5.2:1 Strong
Logo Charcoal #2F2F2Fon White #FFFFFF13.4:1 Excellent
Logo White #FFFFFFon Charcoal #2F2F2F13.4:1 Excellent
Icon color
BackgroundTerracotta#D97448TextCharcoal#2F2F2F
Primary Button4.17:1
Large text

Best for the main action users should notice first.

BackgroundBrick Red#B74927TextWhite#FFFFFF
Secondary Button5.26:1
AA

Useful for softer choices and secondary paths.

BackgroundSage Green#8C9980TextMuted Olive#61734B
Outlined Button1.72:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundSage Green#8C9980TextTerracotta#D97448
Text Button1.07:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsAnalogous color relationship
9:41Terracotta Architecture Earthy Color Palette Color role balance
Analogous system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CTerracotta Architecture Earthy Color PaletteReal Estate brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

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.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Terracotta #D97448
HeadlineUsed for main titles and key messages.Brick Red #B74927
LinkUsed for links and interactive text.Terracotta #D97448

Buttons

Primary Button
BackgroundTerracotta #D97448
TextCharcoal #2F2F2F
Secondary Button
BackgroundBrick Red #B74927
TextWhite #FFFFFF
Outlined Button
BackgroundMuted Olive #61734B
TextMuted Olive #61734B

Interface

TextDefault readable body text.Charcoal #2F2F2F
Bg LightLight page or section background.Sage Green #8C9980
Bg DarkDark page or section background.Sage Green #8C9980
IconSmall interface icons and marks.Warm Beige #C2B99E
BorderCards, inputs, and component borders.Warm Beige #C2B99E
DividerSubtle separators between content.Warm Beige #C2B99E
OutlineFocus rings and emphasis outlines.Warm Beige #C2B99E

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

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

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
: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;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
: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;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "terracotta": "#D97448",
    "brick-red": "#B74927",
    "muted-olive": "#61734B",
    "warm-beige": "#C2B99E",
    "sage-green": "#8C9980",
    "white": "#FFFFFF",
    "cream": "#F5F3F0",
    "charcoal": "#2F2F2F"
}
Press Space to load new palette