Terra Cotta#009CC9
Coral Sand#343579
Navy Slate#25282A
Olive Green#FED141
Warm Taupe#BBBCBC
Palette direction

Terra Coral Navy Color Palette

This color palette integrates balanced, warm main colors with soft earthy support tones, anchored by versatile neutrals, to convey a welcoming yet professional brand presence suitable for real estate and lifestyle sectors.

Split ComplementaryReal Estateterracoralnavyearthy
palette-preview.example
Real Estate color direction

Terra Coral Navy Color Palette

This color palette integrates balanced, warm main colors with soft earthy support tones, anchored by versatile neutrals, to convey a welcoming yet professional brand presence suitable for real estate and lifestyle sectors.

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 Ivory White #FAF9F9on Navy Slate #25282A14.1:1 Excellent
Logo Midnight Black #1B1B2Fon Terra Cotta #009CC95.3:1 Strong
Logo Midnight Black #1B1B2Fon Ivory White #FAF9F916.1:1 Excellent
Logo Midnight Black #1B1B2Fon Olive Green #FED14111.6:1 Excellent
Icon color
BackgroundTerra Cotta#009CC9TextMidnight Black#1B1B2F
Primary Button5.30:1
AA

Best for the main action users should notice first.

BackgroundCoral Sand#343579TextMidnight Black#1B1B2F
Secondary Button1.55:1
Low

Useful for softer choices and secondary paths.

BackgroundIvory White#FAF9F9TextCoral Sand#343579
Outlined Button10.35:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory White#FAF9F9TextCoral Sand#343579
Text Button10.35:1
AAA

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

Palette composition8 colorsSplit Complementary color relationship
9:41Terra Coral Navy Color Palette Color role balance
Split Complementary 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.

CTerra Coral Navy Color PaletteReal Estate brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors Terra, Coral, and Navy offer a complementary balance of grounded warmth, vibrant energy, and deep stability that together create a memorable brand identity.

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.Terra Cotta #009CC9
HeadlineUsed for main titles and key messages.Navy Slate #25282A
LinkUsed for links and interactive text.Coral Sand #343579

Buttons

Primary Button
BackgroundTerra Cotta #009CC9
TextMidnight Black #1B1B2F
Secondary Button
BackgroundCoral Sand #343579
TextMidnight Black #1B1B2F
Outlined Button
BackgroundTerra Cotta #009CC9
TextCoral Sand #343579

Interface

TextDefault readable body text.Midnight Black #1B1B2F
Bg LightLight page or section background.Ivory White #FAF9F9
Bg DarkDark page or section background.Midnight Black #1B1B2F
IconSmall interface icons and marks.Olive Green #FED141
BorderCards, inputs, and component borders.Olive Green #FED141
DividerSubtle separators between content.Olive Green #FED141
OutlineFocus rings and emphasis outlines.Olive Green #FED141

Palette Colors

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

Main (Brand) Colors

The main colors Terra, Coral, and Navy offer a complementary balance of grounded warmth, vibrant energy, and deep stability that together create a memorable brand identity.

PrimaryTerra Cotta

RolesLogo, Btn Primary Bg, Btn Outlined Border

Terra Cotta brings a grounded and warm feel that evokes earthiness and dependability, providing an inviting foundation for brand recognition.

HEX#009CC9
RGB0, 156, 201
HSL193, 100, 39
CMYK100, 22, 0, 21
SecondaryCoral Sand

RolesLink, Btn Secondary Bg, Btn Outlined Text

Coral Sand adds a cheerful and energizing accent, injecting freshness and approachability that enhances user engagement.

HEX#343579
RGB52, 53, 121
HSL239, 40, 34
CMYK57, 56, 0, 53
TertiaryNavy Slate

RolesHeadline

Navy Slate delivers depth and professionalism with its muted blue tone, balancing warmth with seriousness to establish trust and clarity.

HEX#25282A
RGB37, 40, 42
HSL204, 6, 15
CMYK12, 5, 0, 84

Support Colors

The support colors Olive Green and Warm Taupe extend the main palette with subtle, earth-inspired accents that support the warm main hues without competing for attention.

Olive Green

RolesIcon, Border, Divider, Outline

Olive Green offers a muted natural tone that complements the warmth of Terra and Coral by adding calmness and visual cohesion.

HEX#FED141
RGB254, 209, 65
HSL46, 99, 63
CMYK0, 18, 74, 0
Warm Taupe

Warm Taupe provides a soft, neutral earth tone that balances the palette by grounding brighter colors and enhancing overall harmony.

HEX#BBBCBC
RGB187, 188, 188
HSL180, 1, 74
CMYK1, 0, 0, 26

Neutral Colors

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

Ivory White

RolesBg Light

HEX#FAF9F9
RGB250, 249, 249
HSL0, 9, 98
CMYK0, 0, 0, 2
Charcoal Blue
HEX#4A4E69
RGB74, 78, 105
HSL232, 17, 35
CMYK30, 26, 0, 59
Midnight Black

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#1B1B2F
RGB27, 27, 47
HSL240, 27, 15
CMYK43, 43, 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-terra-cotta: #009CC9;
  --color-coral-sand: #343579;
  --color-navy-slate: #25282A;
  --color-olive-green: #FED141;
  --color-warm-taupe: #BBBCBC;
  --color-ivory-white: #FAF9F9;
  --color-charcoal-blue: #4A4E69;
  --color-midnight-black: #1B1B2F;
}

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: #009CC9;
  --role-btn-primary-bg: #009CC9;
  --role-btn-outlined-border: #009CC9;
  --role-link: #343579;
  --role-btn-secondary-bg: #343579;
  --role-btn-outlined-text: #343579;
  --role-headline: #25282A;
  --role-icon: #FED141;
  --role-border: #FED141;
  --role-divider: #FED141;
  --role-outline: #FED141;
  --role-bg-light: #FAF9F9;
  --role-bg-dark: #1B1B2F;
  --role-text: #1B1B2F;
  --role-btn-primary-text: #1B1B2F;
  --role-btn-secondary-text: #1B1B2F;
}

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.
{
    "terra-cotta": "#009CC9",
    "coral-sand": "#343579",
    "navy-slate": "#25282A",
    "olive-green": "#FED141",
    "warm-taupe": "#BBBCBC",
    "ivory-white": "#FAF9F9",
    "charcoal-blue": "#4A4E69",
    "midnight-black": "#1B1B2F"
}
Press Space to load new palette