This palette translates the image’s split between gritty shadow and warm, textured light into a grounded brand system with a refined edge. The darker mineral tones create structure and seriousness, while the pale warm accent keeps the identity approachable and tactile.
This palette translates the image’s split between gritty shadow and warm, textured light into a grounded brand system with a refined edge. The darker mineral tones create structure and seriousness, while the pale warm accent keeps the identity approachable and tactile.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors work together as a realistic shadow-to-light progression, giving the brand a tactile, architectural feel. Their restrained contrast creates clarity without losing the image’s natural grain and quiet drama.
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 work together as a realistic shadow-to-light progression, giving the brand a tactile, architectural feel. Their restrained contrast creates clarity without losing the image’s natural grain and quiet drama.
RolesLogo, Btn Primary Bg
Charcoal Taupe adds weight and credibility while echoing the image’s darkest textured areas.
#4A433D74, 67, 6128, 10, 260, 9, 18, 71RolesBtn Outlined Border, Btn Outlined Text, Headline
Sandstone brings the warm light in the image into the system and gives the brand a softer, more open voice.
#D8CDB4216, 205, 18042, 32, 780, 5, 17, 15RolesLink, Btn Secondary Bg
Mushroom Gray bridges the dark and light zones with a steady midtone that feels understated and versatile.
#6E6558110, 101, 8835, 11, 390, 8, 20, 57The support colors deepen the stone-like character and add subtle environmental nuance without competing with the core contrast. They reinforce texture, balance, and usability across interfaces and brand applications.
RolesIcon, Border
Driftwood softens the palette’s edges and works well for UI structure without drawing too much attention.
#8C8578140, 133, 12039, 8, 510, 5, 14, 45RolesDivider, Outline
Oatmeal adds a quiet transitional tone that keeps separations visible while staying visually subdued.
#B8AD9B184, 173, 15537, 17, 660, 6, 16, 28Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F5F1E8245, 241, 23242, 39, 940, 2, 5, 4RolesBg Dark, Text
#1D1A1729, 26, 2330, 12, 100, 10, 21, 89Copy 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-charcoal-taupe: #4A433D;
--color-sandstone: #D8CDB4;
--color-mushroom-gray: #6E6558;
--color-driftwood: #8C8578;
--color-oatmeal: #B8AD9B;
--color-white: #FFFFFF;
--color-ivory: #F5F1E8;
--color-charcoal: #1D1A17;
}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: #4A433D;
--role-btn-primary-bg: #4A433D;
--role-btn-outlined-border: #D8CDB4;
--role-btn-outlined-text: #D8CDB4;
--role-headline: #D8CDB4;
--role-link: #6E6558;
--role-btn-secondary-bg: #6E6558;
--role-icon: #8C8578;
--role-border: #8C8578;
--role-divider: #B8AD9B;
--role-outline: #B8AD9B;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-light: #F5F1E8;
--role-bg-dark: #1D1A17;
--role-text: #1D1A17;
}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.{
"charcoal-taupe": "#4A433D",
"sandstone": "#D8CDB4",
"mushroom-gray": "#6E6558",
"driftwood": "#8C8578",
"oatmeal": "#B8AD9B",
"white": "#FFFFFF",
"ivory": "#F5F1E8",
"charcoal": "#1D1A17"
}