This palette draws inspiration from the warm, natural tones of the rocky desert landscape and the muted blue sky, evoking both ruggedness and tranquility in a grounded, approachable color system.
This palette draws inspiration from the warm, natural tones of the rocky desert landscape and the muted blue sky, evoking both ruggedness and tranquility in a grounded, approachable color system.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors balance warm ochre and rich rust from the desert rocks with a calming blue hue from the sky, creating a visually dynamic but harmonious system.
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 balance warm ochre and rich rust from the desert rocks with a calming blue hue from the sky, creating a visually dynamic but harmonious system.
RolesLogo, Link, Btn Primary Bg, Headline
Ochre brings warmth and earthy energy, evoking the sunlit rocks and natural vitality.
#C97524201, 117, 3629, 70, 460, 42, 82, 21RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Rust adds depth and ruggedness, grounding the palette in natural, weathered textures.
#814421129, 68, 3322, 59, 320, 47, 74, 49Steel Blue introduces calm and balance, reflecting the muted sky and enhancing readability.
#5D8AA893, 138, 168204, 30, 5145, 18, 0, 34The support colors extend the palette with softer, muted warm tones and a cool neutral to complement and balance the main hues without overpowering them.
RolesIcon, Border, Divider, Outline
Sandstone provides a gentle, muted ochre tone that complements Ochre and Rust by offering subtle warmth and soft contrast.
#BB9B71187, 155, 11334, 35, 590, 17, 40, 27Shadow Taupe adds a cool, dark balance to the warm colors, enhancing the rustic vibe while supporting icon and border clarity.
#7A6A51122, 106, 8137, 20, 400, 13, 34, 52Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F2EB245, 242, 23542, 33, 940, 1, 4, 4RolesBg Dark, Text, Btn Primary Text
#2B2B2B43, 43, 430, 0, 170, 0, 0, 83Copy 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: #C97524;
--color-rust: #814421;
--color-steel-blue: #5D8AA8;
--color-sandstone: #BB9B71;
--color-shadow-taupe: #7A6A51;
--color-white: #FFFFFF;
--color-ivory: #F5F2EB;
--color-charcoal: #2B2B2B;
}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: #C97524;
--role-link: #C97524;
--role-btn-primary-bg: #C97524;
--role-headline: #C97524;
--role-btn-secondary-bg: #814421;
--role-btn-outlined-border: #814421;
--role-btn-outlined-text: #814421;
--role-icon: #BB9B71;
--role-border: #BB9B71;
--role-divider: #BB9B71;
--role-outline: #BB9B71;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #2B2B2B;
--role-text: #2B2B2B;
--role-btn-primary-text: #2B2B2B;
}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": "#C97524",
"rust": "#814421",
"steel-blue": "#5D8AA8",
"sandstone": "#BB9B71",
"shadow-taupe": "#7A6A51",
"white": "#FFFFFF",
"ivory": "#F5F2EB",
"charcoal": "#2B2B2B"
}