This palette draws inspiration from the muted, warm, and sophisticated tones of the image, combining dusty mauve, warm taupe, and soft off-white with gentle support colors that create an inviting, calm, and balanced atmosphere perfect for elegant, understated brand identities.
This palette draws inspiration from the muted, warm, and sophisticated tones of the image, combining dusty mauve, warm taupe, and soft off-white with gentle support colors that create an inviting, calm, and balanced atmosphere perfect for elegant, understated brand identities.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine dusty mauve and muted warm taupe with a soft off-white that balance warmth and subtle sophistication for a cohesive, recognizable palette.
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 combine dusty mauve and muted warm taupe with a soft off-white that balance warmth and subtle sophistication for a cohesive, recognizable palette.
RolesLogo, Link, Btn Primary Bg, Headline
Dusty Mauve brings warmth and subtle richness, evoking a nostalgic and sophisticated vibe that anchors the palette.
#6D4E5C109, 78, 92333, 17, 370, 28, 16, 57RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Warm Taupe offers soft earthiness that complements the mauve and enhances the palette's approachable elegance.
#A5948F165, 148, 14314, 11, 600, 10, 13, 35RolesBg Light
Soft Ivory provides a gentle, near-white backdrop that brightens and contrasts with the deeper main hues without harshness.
#F9F5F1249, 245, 24130, 40, 960, 2, 3, 2Support colors extend the palette with understated neutrals and muted shades that harmonize with the main colors and maintain warmth without competing.
RolesBorder, Divider, Outline
Muted Sand adds texture and subtle separation with its cooler undertone balancing the warmth of taupe and mauve.
#BDB1A5189, 177, 16530, 15, 690, 6, 13, 26RolesIcon
Smoky Brown provides a darker accent that grounds the palette, offering contrast and definition for icons and smaller elements.
#83756B131, 117, 10725, 10, 470, 11, 18, 49Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F9F5F1249, 245, 24130, 40, 960, 2, 3, 2RolesBg Dark, Text, Btn Secondary Text
#3C2F2F60, 47, 470, 12, 210, 22, 22, 76Copy 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-dusty-mauve: #6D4E5C;
--color-warm-taupe: #A5948F;
--color-soft-ivory: #F9F5F1;
--color-muted-sand: #BDB1A5;
--color-smoky-brown: #83756B;
--color-pure-white: #FFFFFF;
--color-dark-charcoal: #3C2F2F;
}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: #6D4E5C;
--role-link: #6D4E5C;
--role-btn-primary-bg: #6D4E5C;
--role-headline: #6D4E5C;
--role-btn-secondary-bg: #A5948F;
--role-btn-outlined-border: #A5948F;
--role-btn-outlined-text: #A5948F;
--role-bg-light: #F9F5F1;
--role-border: #BDB1A5;
--role-divider: #BDB1A5;
--role-outline: #BDB1A5;
--role-icon: #83756B;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #3C2F2F;
--role-text: #3C2F2F;
--role-btn-secondary-text: #3C2F2F;
}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.{
"dusty-mauve": "#6D4E5C",
"warm-taupe": "#A5948F",
"soft-ivory": "#F9F5F1",
"muted-sand": "#BDB1A5",
"smoky-brown": "#83756B",
"pure-white": "#FFFFFF",
"dark-charcoal": "#3C2F2F"
}