This palette translates the image’s weathered sand and shadowy earth tones into a grounded, tactile brand system. The colors feel natural and understated, with enough contrast to support clear digital hierarchy and a calm, premium tone.
This palette translates the image’s weathered sand and shadowy earth tones into a grounded, tactile brand system. The colors feel natural and understated, with enough contrast to support clear digital hierarchy and a calm, premium tone.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a restrained desert range, so the palette feels cohesive and naturally lifted from the image. Their close tonal relationship gives the system a quiet, tactile recognition that works well for brands rooted in atmosphere and place.
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 stay within a restrained desert range, so the palette feels cohesive and naturally lifted from the image. Their close tonal relationship gives the system a quiet, tactile recognition that works well for brands rooted in atmosphere and place.
RolesLogo, Btn Primary Bg
Sandstone anchors the identity with a familiar, sun-worn neutral that feels stable and versatile.
#B7AC93183, 172, 14742, 20, 650, 6, 20, 28RolesLink, Btn Secondary Bg, Btn Outlined Border
Khaki adds depth and movement while staying close enough to the core sand tone to feel integrated.
#9D9075157, 144, 11741, 17, 540, 8, 25, 38RolesHeadline
Saddle Brown provides a richer focal point that gives headlines stronger presence without breaking the palette.
#7A6B52122, 107, 8238, 20, 400, 12, 33, 52The support colors extend the sandy core with subtle natural depth and a muted earthy contrast. They keep the system usable across interfaces while preserving the calm, organic character of the main palette.
RolesIcon, Border
Gray Olive softens structural elements and blends cleanly with the sand-based main colors.
#8B836F139, 131, 11143, 11, 490, 6, 20, 45RolesDivider, Outline
Camel adds a gentle warm accent for UI lines and outlines without competing with the primary tones.
#A89977168, 153, 11942, 22, 560, 9, 29, 34Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F3F0E8243, 240, 23244, 31, 930, 1, 5, 5RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#1F1A1431, 26, 2033, 22, 100, 16, 35, 88Copy 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-sandstone: #B7AC93;
--color-khaki: #9D9075;
--color-saddle-brown: #7A6B52;
--color-gray-olive: #8B836F;
--color-camel: #A89977;
--color-white: #FFFFFF;
--color-ivory: #F3F0E8;
--color-charcoal: #1F1A14;
}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: #B7AC93;
--role-btn-primary-bg: #B7AC93;
--role-link: #9D9075;
--role-btn-secondary-bg: #9D9075;
--role-btn-outlined-border: #9D9075;
--role-headline: #7A6B52;
--role-icon: #8B836F;
--role-border: #8B836F;
--role-divider: #A89977;
--role-outline: #A89977;
--role-bg-light: #FFFFFF;
--role-btn-outlined-text: #F3F0E8;
--role-bg-dark: #1F1A14;
--role-text: #1F1A14;
--role-btn-primary-text: #1F1A14;
--role-btn-secondary-text: #1F1A14;
}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.{
"sandstone": "#B7AC93",
"khaki": "#9D9075",
"saddle-brown": "#7A6B52",
"gray-olive": "#8B836F",
"camel": "#A89977",
"white": "#FFFFFF",
"ivory": "#F3F0E8",
"charcoal": "#1F1A14"
}