This palette pairs a weathered olive gold with a soft cream and a grounded charcoal to echo the image’s warm, split-panel balance. A rusted terracotta accent adds depth and energy without breaking the restrained, heritage-like feel.
This palette pairs a weathered olive gold with a soft cream and a grounded charcoal to echo the image’s warm, split-panel balance. A rusted terracotta accent adds depth and energy without breaking the restrained, heritage-like feel.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine an earthy olive gold, a luminous cream, and a deep charcoal to create a refined, high-contrast system with a grounded, heritage feel. Their balance feels recognizable and practical across identity and UI without relying on overly familiar blue or green tech cues.
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 combine an earthy olive gold, a luminous cream, and a deep charcoal to create a refined, high-contrast system with a grounded, heritage feel. Their balance feels recognizable and practical across identity and UI without relying on overly familiar blue or green tech cues.
RolesLogo, Btn Primary Bg
This muted olive gold gives the brand a distinctive, heritage-forward signature with enough warmth to feel premium.
#B5A347181, 163, 7150, 44, 490, 10, 61, 29RolesBtn Secondary Bg, Bg Light
This softened cream brightens layouts and gives the identity an elegant, breathable surface that supports the richer hues.
#F2E7C0242, 231, 19247, 66, 850, 5, 21, 5RolesHeadline, Bg Dark
This near-black green anchors typography and dark interfaces with strong readability and a more characterful tone than plain black.
#1E2C2430, 44, 36146, 19, 1532, 0, 18, 83The support colors extend the palette with restrained warmth and depth, reinforcing the historic mood without competing with the main trio. They add usable accents for emphasis, borders, and interactive detail while staying visually subordinate.
RolesLink, Btn Outlined Border
This muted terracotta bridges the olive and cream with a warm, tactile accent that adds energy and keeps interface states feeling human.
#A56A47165, 106, 7122, 40, 460, 36, 57, 35RolesIcon, Border, Divider, Outline, Btn Outlined Text
This subdued earthy support tone quiets UI structure and delivers better contrast than the accent without pulling attention from the main colors.
#6A5D3A106, 93, 5844, 29, 320, 12, 45, 58Utility colors for backgrounds, text, borders, and balance.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F3EA247, 243, 23442, 45, 940, 2, 5, 3RolesText, Btn Primary Text, Btn Secondary Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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-antique-olive: #B5A347;
--color-cream-veil: #F2E7C0;
--color-forest-charcoal: #1E2C24;
--color-brick-clay: #A56A47;
--color-moss-umber: #6A5D3A;
--color-pure-white: #FFFFFF;
--color-soft-linen: #F7F3EA;
--color-ink-black: #111111;
}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: #B5A347;
--role-btn-primary-bg: #B5A347;
--role-btn-secondary-bg: #F2E7C0;
--role-bg-light: #F2E7C0;
--role-headline: #1E2C24;
--role-bg-dark: #1E2C24;
--role-link: #A56A47;
--role-btn-outlined-border: #A56A47;
--role-icon: #6A5D3A;
--role-border: #6A5D3A;
--role-divider: #6A5D3A;
--role-outline: #6A5D3A;
--role-btn-outlined-text: #6A5D3A;
--role-text: #111111;
--role-btn-primary-text: #111111;
--role-btn-secondary-text: #111111;
}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.{
"antique-olive": "#B5A347",
"cream-veil": "#F2E7C0",
"forest-charcoal": "#1E2C24",
"brick-clay": "#A56A47",
"moss-umber": "#6A5D3A",
"pure-white": "#FFFFFF",
"soft-linen": "#F7F3EA",
"ink-black": "#111111"
}