Dusty Mauve#6D4E5C
Warm Taupe#A5948F
Soft Ivory#F9F5F1
Muted Sand#BDB1A5
Smoky Brown#83756B
Palette direction

Dusty Mauve Taupe Color Palette

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.

AnalogousLuxury And Lifestyledusty mauvewarm taupesoft ivorymuted colors
palette-preview.example
Luxury And Lifestyle color direction

Dusty Mauve Taupe Color Palette

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 system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Dark Charcoal #3C2F2Fon Soft Ivory #F9F5F111.8:1 Excellent
Logo Pure White #FFFFFFon Dusty Mauve #6D4E5C7.3:1 Excellent
Logo Dark Charcoal #3C2F2Fon Muted Sand #BDB1A56.1:1 Strong
Icon color
BackgroundDusty Mauve#6D4E5CTextPure White#FFFFFF
Primary Button7.26:1
AAA

Best for the main action users should notice first.

BackgroundWarm Taupe#A5948FTextDark Charcoal#3C2F2F
Secondary Button4.41:1
Large text

Useful for softer choices and secondary paths.

BackgroundSoft Ivory#F9F5F1TextWarm Taupe#A5948F
Outlined Button2.68:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundSoft Ivory#F9F5F1TextDusty Mauve#6D4E5C
Text Button6.69:1
AA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsAnalogous color relationship
9:41Dusty Mauve Taupe Color Palette Color role balance
Analogous system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CDusty Mauve Taupe Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color 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.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Dusty Mauve #6D4E5C
HeadlineUsed for main titles and key messages.Dusty Mauve #6D4E5C
LinkUsed for links and interactive text.Dusty Mauve #6D4E5C

Buttons

Primary Button
BackgroundDusty Mauve #6D4E5C
TextPure White #FFFFFF
Secondary Button
BackgroundWarm Taupe #A5948F
TextDark Charcoal #3C2F2F
Outlined Button
BackgroundWarm Taupe #A5948F
TextWarm Taupe #A5948F

Interface

TextDefault readable body text.Dark Charcoal #3C2F2F
Bg LightLight page or section background.Soft Ivory #F9F5F1
Bg DarkDark page or section background.Dark Charcoal #3C2F2F
IconSmall interface icons and marks.Smoky Brown #83756B
BorderCards, inputs, and component borders.Muted Sand #BDB1A5
DividerSubtle separators between content.Muted Sand #BDB1A5
OutlineFocus rings and emphasis outlines.Muted Sand #BDB1A5

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

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.

PrimaryDusty Mauve

RolesLogo, Link, Btn Primary Bg, Headline

Dusty Mauve brings warmth and subtle richness, evoking a nostalgic and sophisticated vibe that anchors the palette.

HEX#6D4E5C
RGB109, 78, 92
HSL333, 17, 37
CMYK0, 28, 16, 57
SecondaryWarm Taupe

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Warm Taupe offers soft earthiness that complements the mauve and enhances the palette's approachable elegance.

HEX#A5948F
RGB165, 148, 143
HSL14, 11, 60
CMYK0, 10, 13, 35
TertiarySoft Ivory

RolesBg Light

Soft Ivory provides a gentle, near-white backdrop that brightens and contrasts with the deeper main hues without harshness.

HEX#F9F5F1
RGB249, 245, 241
HSL30, 40, 96
CMYK0, 2, 3, 2

Support Colors

Support colors extend the palette with understated neutrals and muted shades that harmonize with the main colors and maintain warmth without competing.

Muted Sand

RolesBorder, Divider, Outline

Muted Sand adds texture and subtle separation with its cooler undertone balancing the warmth of taupe and mauve.

HEX#BDB1A5
RGB189, 177, 165
HSL30, 15, 69
CMYK0, 6, 13, 26
Smoky Brown

RolesIcon

Smoky Brown provides a darker accent that grounds the palette, offering contrast and definition for icons and smaller elements.

HEX#83756B
RGB131, 117, 107
HSL25, 10, 47
CMYK0, 11, 18, 49

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBtn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Soft Ivory
HEX#F9F5F1
RGB249, 245, 241
HSL30, 40, 96
CMYK0, 2, 3, 2
Dark Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#3C2F2F
RGB60, 47, 47
HSL0, 12, 21
CMYK0, 22, 22, 76

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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;
}

Role tokens

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;
}

JSON

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"
}
Press Space to load new palette