This palette is inspired by the warm, earthy terracotta hues contrasted with cool sky blues and grounded by neutral grays and blacks, offering a balanced yet distinctive color system suitable for creative and architectural branding.
This palette is inspired by the warm, earthy terracotta hues contrasted with cool sky blues and grounded by neutral grays and blacks, offering a balanced yet distinctive color system suitable for creative and architectural branding.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a complementary scheme with warm terracotta tones balanced by cool sky blue, creating a vivid yet harmonious contrast that anchors the palette.
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 form a complementary scheme with warm terracotta tones balanced by cool sky blue, creating a vivid yet harmonious contrast that anchors the palette.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Terracotta provides warmth and approachability, evoking earthy authenticity and grounded creativity.
#B85C38184, 92, 5617, 53, 470, 50, 70, 28RolesLink, Btn Secondary Bg, Headline
Steel Blue offers a calm, professional counterpoint with subtle sophistication and trustworthiness.
#7AA9C1122, 169, 193200, 36, 6237, 12, 0, 24RolesBtn Outlined Text
Dark Brown grounds the palette with depth and enhances readability in outlined button text.
#3F2A1763, 42, 2329, 47, 170, 33, 63, 75Support colors subtly extend the main palette with softer, muted tones that complement and balance the strong warm and cool hues without competing for attention.
RolesIcon, Border, Divider, Outline
Peach dims the stronger terracotta with a lighter, gentle warm tone, perfect for subtle UI elements.
#E2B59D226, 181, 15721, 54, 750, 20, 31, 11Light Steel Blue supports the main blue with a softer tint, maintaining coolness with less intensity.
#A3BBD9163, 187, 217213, 42, 7525, 14, 0, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#F6F5F3246, 245, 24340, 14, 960, 0, 1, 4RolesText, Btn Secondary Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90RolesBg Dark
#2F2F2F47, 47, 470, 0, 180, 0, 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-terracotta: #B85C38;
--color-steel-blue: #7AA9C1;
--color-dark-brown: #3F2A17;
--color-peach: #E2B59D;
--color-light-steel-blue: #A3BBD9;
--color-ivory: #F6F5F3;
--color-charcoal: #1A1A1A;
--color-dark-slate: #2F2F2F;
}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: #B85C38;
--role-btn-primary-bg: #B85C38;
--role-btn-outlined-border: #B85C38;
--role-link: #7AA9C1;
--role-btn-secondary-bg: #7AA9C1;
--role-headline: #7AA9C1;
--role-btn-outlined-text: #3F2A17;
--role-icon: #E2B59D;
--role-border: #E2B59D;
--role-divider: #E2B59D;
--role-outline: #E2B59D;
--role-bg-light: #F6F5F3;
--role-btn-primary-text: #F6F5F3;
--role-text: #1A1A1A;
--role-btn-secondary-text: #1A1A1A;
--role-bg-dark: #2F2F2F;
}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": "#B85C38",
"steel-blue": "#7AA9C1",
"dark-brown": "#3F2A17",
"peach": "#E2B59D",
"light-steel-blue": "#A3BBD9",
"ivory": "#F6F5F3",
"charcoal": "#1A1A1A",
"dark-slate": "#2F2F2F"
}