Burnt Orange#D05C2F
Ivory#F3E8D3
Muted Taupe#A78963
Palette direction

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
palette-preview.example
Hospitality Events color direction

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.

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 Charcoal Brown #4B4237on Ivory #F3E8D38.1:1 Excellent
Logo Charcoal Brown #4B4237on White #FFFFFF9.8:1 Excellent
Logo White #FFFFFFon Charcoal Brown #4B42379.8:1 Excellent
Icon color
BackgroundBurnt Orange#D05C2FTextWhite#FFFFFF
Primary Button4.00:1
Large text

Best for the main action users should notice first.

BackgroundIvory#F3E8D3TextCharcoal Brown#4B4237
Secondary Button8.11:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextIvory#F3E8D3
Outlined Button1.21:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextBurnt Orange#D05C2F
Text Button4.00:1
Large text

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

Palette composition6 colorsMonochromatic color relationship
9:41Terracotta Ivory Architectural Color Palette Color role balance
Monochromatic 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 Ivory Architectural Color PaletteHospitality Events brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

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.

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.Burnt Orange #D05C2F
HeadlineUsed for main titles and key messages.Ivory #F3E8D3
LinkUsed for links and interactive text.Burnt Orange #D05C2F

Buttons

Primary Button
BackgroundBurnt Orange #D05C2F
TextWhite #FFFFFF
Secondary Button
BackgroundIvory #F3E8D3
TextCharcoal Brown #4B4237
Outlined Button
BackgroundIvory #F3E8D3
TextIvory #F3E8D3

Interface

TextDefault readable body text.Charcoal Brown #4B4237
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Near-White #F9F7F1
IconSmall interface icons and marks.Muted Taupe #A78963
BorderCards, inputs, and component borders.Muted Taupe #A78963
DividerSubtle separators between content.Muted Taupe #A78963
OutlineFocus rings and emphasis outlines.Muted Taupe #A78963

Palette Colors

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

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

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-burnt-orange: #D05C2F;
  --color-ivory: #F3E8D3;
  --color-muted-taupe: #A78963;
  --color-white: #FFFFFF;
  --color-near-white: #F9F7F1;
  --color-charcoal-brown: #4B4237;
}

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: #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;
}

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.
{
    "burnt-orange": "#D05C2F",
    "ivory": "#F3E8D3",
    "muted-taupe": "#A78963",
    "white": "#FFFFFF",
    "near-white": "#F9F7F1",
    "charcoal-brown": "#4B4237"
}
Press Space to load new palette