This palette turns the image’s quiet procession from warm sand to stone to slate into a refined, grounded brand system. The colors feel restrained but modern, with enough variation to support clear hierarchy across identity and interface use.
This palette turns the image’s quiet procession from warm sand to stone to slate into a refined, grounded brand system. The colors feel restrained but modern, with enough variation to support clear hierarchy across identity and interface use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors move through adjacent warm-to-cool neutrals, creating a calm and cohesive system that still has enough contrast to establish hierarchy. Their soft transitions make the palette feel architectural, tactile, and easy to extend across brand touchpoints.
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 move through adjacent warm-to-cool neutrals, creating a calm and cohesive system that still has enough contrast to establish hierarchy. Their soft transitions make the palette feel architectural, tactile, and easy to extend across brand touchpoints.
RolesLogo, Btn Primary Bg
This warm beige gives the brand an approachable, sunlit entry point that keeps the system from feeling overly severe.
#CDBA8E205, 186, 14242, 39, 680, 9, 31, 20RolesBtn Secondary Bg, Btn Outlined Border
This muted taupe adds weight and balance, giving secondary actions a grounded and more understated presence.
#8F866A143, 134, 10645, 15, 490, 6, 26, 44RolesLink, Headline
This cool slate tone introduces clarity and focus, making headings and links feel precise without breaking the palette's calm tone.
#56645F86, 100, 95159, 8, 3614, 0, 5, 61The support colors extend the main palette with deeper and softer low-chroma accents that preserve the restrained mood. They add usability and hierarchy without competing with the core sand, taupe, and slate relationship.
RolesIcon, Outline
This subdued green-gray supports interface structure and icons with a cool, practical counterweight to the warmer main tones.
#6F7D76111, 125, 118150, 6, 4611, 0, 6, 51RolesBorder, Divider
This softened stone-beige works well for borders and dividers because it stays visible while remaining unobtrusive.
#B9B1A1185, 177, 16140, 15, 680, 4, 13, 27Utility colors for backgrounds, text, borders, and balance.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text, Bg Light
#F5F1E8245, 241, 23242, 39, 940, 2, 5, 4RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#16161622, 22, 220, 0, 90, 0, 0, 91Copy 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-desert-linen: #CDBA8E;
--color-driftwood-taupe: #8F866A;
--color-weathered-slate: #56645F;
--color-mossed-steel: #6F7D76;
--color-pale-umber: #B9B1A1;
--color-pure-white: #FFFFFF;
--color-porcelain-tint: #F5F1E8;
--color-charcoal-black: #161616;
}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: #CDBA8E;
--role-btn-primary-bg: #CDBA8E;
--role-btn-secondary-bg: #8F866A;
--role-btn-outlined-border: #8F866A;
--role-link: #56645F;
--role-headline: #56645F;
--role-icon: #6F7D76;
--role-outline: #6F7D76;
--role-border: #B9B1A1;
--role-divider: #B9B1A1;
--role-btn-outlined-text: #F5F1E8;
--role-bg-light: #F5F1E8;
--role-bg-dark: #161616;
--role-text: #161616;
--role-btn-primary-text: #161616;
--role-btn-secondary-text: #161616;
}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.{
"desert-linen": "#CDBA8E",
"driftwood-taupe": "#8F866A",
"weathered-slate": "#56645F",
"mossed-steel": "#6F7D76",
"pale-umber": "#B9B1A1",
"pure-white": "#FFFFFF",
"porcelain-tint": "#F5F1E8",
"charcoal-black": "#161616"
}