This warm and earthy palette draws inspiration from the vibrant ochre walls, soft white moldings, and deep green door seen in the image, creating a balanced and inviting color system ideal for brands valuing heritage and warmth.
This warm and earthy palette draws inspiration from the vibrant ochre walls, soft white moldings, and deep green door seen in the image, creating a balanced and inviting color system ideal for brands valuing heritage and warmth.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a vibrant ochre yellow with a deep olive green and a soft cream, creating a warm, balanced, and harmonious look that evokes traditional architecture and natural elements.
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 a vibrant ochre yellow with a deep olive green and a soft cream, creating a warm, balanced, and harmonious look that evokes traditional architecture and natural elements.
RolesLogo, Btn Primary Bg, Btn Outlined Border, Link
Ochre delivers warmth and energy, grounding the palette in a rich heritage feel while grabbing attention with its brightness.
#D9982C217, 152, 4437, 69, 510, 30, 80, 15RolesBtn Secondary Bg, Btn Outlined Text
Olive Green brings a deep, natural balance that provides contrast and a sense of calm alongside the brighter ochre.
#3B552059, 85, 3289, 45, 2331, 0, 62, 67RolesHeadline
Cream introduces softness and clarity to headlines, complementing the strong earthy tones without overwhelming the palette.
#F3E8D5243, 232, 21338, 56, 890, 5, 12, 5Supporting colors extend the palette with muted browns and warm grays that reinforce the earthiness and add subtle depth without competing with the main colors.
RolesIcon, Border, Divider, Outline
Muted Mustard echoes ochre’s warmth in a softer tone, perfect for subtle UI elements like borders and icons.
#9B7A3A155, 122, 5840, 46, 420, 21, 63, 39Warm Taupe adds a neutral warmth that balances the vibrancy of ochre and the depth of olive, supporting visual hierarchy.
#A8997F168, 153, 12738, 19, 580, 9, 24, 34Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#EFE9DF239, 233, 22338, 33, 910, 3, 7, 6RolesBg Dark, Text, Btn Primary Text
#26221E38, 34, 3030, 12, 130, 11, 21, 85Copy 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-ochre: #D9982C;
--color-olive-green: #3B5520;
--color-cream: #F3E8D5;
--color-muted-mustard: #9B7A3A;
--color-warm-taupe: #A8997F;
--color-white: #FFFFFF;
--color-almond: #EFE9DF;
--color-ebony: #26221E;
}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: #D9982C;
--role-btn-primary-bg: #D9982C;
--role-btn-outlined-border: #D9982C;
--role-link: #D9982C;
--role-btn-secondary-bg: #3B5520;
--role-btn-outlined-text: #3B5520;
--role-headline: #F3E8D5;
--role-icon: #9B7A3A;
--role-border: #9B7A3A;
--role-divider: #9B7A3A;
--role-outline: #9B7A3A;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #26221E;
--role-text: #26221E;
--role-btn-primary-text: #26221E;
}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.{
"ochre": "#D9982C",
"olive-green": "#3B5520",
"cream": "#F3E8D5",
"muted-mustard": "#9B7A3A",
"warm-taupe": "#A8997F",
"white": "#FFFFFF",
"almond": "#EFE9DF",
"ebony": "#26221E"
}