This palette translates the image’s soft stone, sand, and shadow tones into a calm, tactile system with enough contrast for digital use. The colors feel grounded and refined, making the brand look natural, composed, and quietly premium.
This palette translates the image’s soft stone, sand, and shadow tones into a calm, tactile system with enough contrast for digital use. The colors feel grounded and refined, making the brand look natural, composed, and quietly premium.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a warm stone-to-sand range, creating a cohesive system that feels natural and understated. Their close tonal relationship makes the palette easy to recognize while keeping it sophisticated and serene.
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 warm stone-to-sand range, creating a cohesive system that feels natural and understated. Their close tonal relationship makes the palette easy to recognize while keeping it sophisticated and serene.
RolesLogo, Btn Primary Bg
Warm Taupe gives the brand a steady, grounded anchor that feels timeless and tactile.
#7B7367123, 115, 10336, 9, 440, 7, 16, 52RolesLink, Headline
Mushroom adds a softer, more approachable accent that keeps the palette warm and elegant.
#9A8A78154, 138, 12032, 14, 540, 10, 22, 40RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Sandstone bridges the taupe and sand notes, adding natural warmth without overpowering the system.
#8F7D63143, 125, 9935, 18, 470, 13, 31, 44The support colors extend the stone palette with muted depth and a pale mineral highlight. They help define structure and secondary UI details while staying visually subordinate to the main earth tones.
RolesIcon, Border
Pebble softens the interface edges and works well for subtle supporting elements.
#A89F91168, 159, 14537, 12, 610, 5, 14, 34RolesDivider, Outline
Driftwood Sand adds a light mineral note that separates sections gently and keeps surfaces airy.
#D6C8B2214, 200, 17837, 31, 770, 7, 17, 16Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F6F1E8246, 241, 23239, 44, 940, 2, 6, 4RolesBg Dark, Text
#2A241F42, 36, 3127, 15, 140, 14, 26, 84Copy 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-warm-taupe: #7B7367;
--color-mushroom: #9A8A78;
--color-sandstone: #8F7D63;
--color-pebble: #A89F91;
--color-driftwood-sand: #D6C8B2;
--color-white: #FFFFFF;
--color-ivory: #F6F1E8;
--color-charcoal: #2A241F;
}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: #7B7367;
--role-btn-primary-bg: #7B7367;
--role-link: #9A8A78;
--role-headline: #9A8A78;
--role-btn-secondary-bg: #8F7D63;
--role-btn-outlined-border: #8F7D63;
--role-btn-outlined-text: #8F7D63;
--role-icon: #A89F91;
--role-border: #A89F91;
--role-divider: #D6C8B2;
--role-outline: #D6C8B2;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-light: #F6F1E8;
--role-bg-dark: #2A241F;
--role-text: #2A241F;
}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.{
"warm-taupe": "#7B7367",
"mushroom": "#9A8A78",
"sandstone": "#8F7D63",
"pebble": "#A89F91",
"driftwood-sand": "#D6C8B2",
"white": "#FFFFFF",
"ivory": "#F6F1E8",
"charcoal": "#2A241F"
}