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.
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 systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
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.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this 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.
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.
#009CC90, 156, 201193, 100, 39100, 22, 0, 21RolesLink, Btn Secondary Bg, Btn Outlined Text
Coral Sand adds a cheerful and energizing accent, injecting freshness and approachability that enhances user engagement.
#34357952, 53, 121239, 40, 3457, 56, 0, 53RolesHeadline
Navy Slate delivers depth and professionalism with its muted blue tone, balancing warmth with seriousness to establish trust and clarity.
#25282A37, 40, 42204, 6, 1512, 5, 0, 84The 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.
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.
#FED141254, 209, 6546, 99, 630, 18, 74, 0Warm Taupe provides a soft, neutral earth tone that balances the palette by grounding brighter colors and enhancing overall harmony.
#BBBCBC187, 188, 188180, 1, 741, 0, 0, 26Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FAF9F9250, 249, 2490, 9, 980, 0, 0, 2#4A4E6974, 78, 105232, 17, 3530, 26, 0, 59RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#1B1B2F27, 27, 47240, 27, 1543, 43, 0, 82Copy palette values for design systems, websites, and client handoff.
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;
}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;
}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"
}