Taupe#6b5e53
Ivory#f9f6f2
Muted Gold#a28a74
Palette direction

Taupe Ivory Luxury Color Palette

A luxury minimal palette centered on warm, muted browns and creamy neutrals, combining the existing deep taupe and soft ivory to create an elegant and restrained color system. The main colors offer timeless sophistication while support colors add subtle depth without overpowering the brand's refined identity.

MonochromaticFashion Beautytaupeivoryluxuryminimal
palette-preview.example
Fashion Beauty color direction

Taupe Ivory Luxury Color Palette

A luxury minimal palette centered on warm, muted browns and creamy neutrals, combining the existing deep taupe and soft ivory to create an elegant and restrained color system. The main colors offer timeless sophistication while support colors add subtle depth without overpowering the brand's refined identity.

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 Charcoal #1F1A17on Ivory #F9F6F216.0:1 Excellent
Logo White #FFFFFFon Taupe #6B5E536.3:1 Strong
Logo Charcoal #1F1A17on Almond #E9E6E213.9:1 Excellent
Logo Charcoal #1F1A17on Muted Gold #A28A745.3:1 Strong
Icon color
BackgroundTaupe#6b5e53TextWhite#ffffff
Primary Button6.27:1
AA

Best for the main action users should notice first.

BackgroundIvory#f9f6f2TextCharcoal#1f1a17
Secondary Button16.00:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#f9f6f2TextTaupe#6b5e53
Outlined Button5.82:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#f9f6f2TextTaupe#6b5e53
Text Button5.82:1
AA

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

Palette composition6 colorsMonochromatic color relationship
9:41Taupe Ivory Luxury Color Palette Color role balance
Monochromatic 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.

CTaupe Ivory Luxury Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview

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.Taupe #6b5e53
HeadlineUsed for main titles and key messages.Taupe #6b5e53
LinkUsed for links and interactive text.Taupe #6b5e53

Buttons

Primary Button
BackgroundTaupe #6b5e53
TextWhite #ffffff
Secondary Button
BackgroundIvory #f9f6f2
TextCharcoal #1f1a17
Outlined Button
BackgroundTaupe #6b5e53
TextTaupe #6b5e53

Interface

TextDefault readable body text.Charcoal #1f1a17
Bg LightLight page or section background.Ivory #f9f6f2
Bg DarkDark page or section background.Charcoal #1f1a17
IconSmall interface icons and marks.Muted Gold #a28a74
BorderCards, inputs, and component borders.Muted Gold #a28a74
DividerSubtle separators between content.Muted Gold #a28a74
OutlineFocus rings and emphasis outlines.Muted Gold #a28a74

Palette Colors

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

Main (Brand) Colors

The main colors blend warm brownish taupe and soft ivory creating a natural and sophisticated balance that conveys luxury through subtle contrast and harmony.

PrimaryTaupe

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Taupe anchors the palette with a rich, warm brown that delivers timeless elegance and strong brand recognition.

HEX#6b5e53
RGB107, 94, 83
HSL28, 13, 37
CMYK0, 12, 22, 58
SecondaryIvory

RolesBg Light, Btn Secondary Bg

Ivory provides a creamy, soft background and button text color, offering a luxurious, gentle contrast to the darker tones.

HEX#f9f6f2
RGB249, 246, 242
HSL34, 37, 96
CMYK0, 1, 3, 2

Support Colors

Support colors extend the warm, muted aesthetic with subtle neutral grays and a touch of muted gold, reinforcing depth and visual interest without competing with the main taupe and ivory.

Muted Gold

RolesIcon, Border, Divider, Outline

Muted Gold complements taupe by adding a soft, metallic warmth that enhances the palette's luxurious feel while remaining visually subdued.

HEX#a28a74
RGB162, 138, 116
HSL29, 20, 55
CMYK0, 15, 28, 36

Neutral Colors

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

Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#1f1a17
RGB31, 26, 23
HSL23, 15, 11
CMYK0, 16, 26, 88
Almond
HEX#e9e6e2
RGB233, 230, 226
HSL34, 14, 90
CMYK0, 1, 3, 9
White

RolesBtn Primary Text

HEX#ffffff
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0

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-taupe: #6b5e53;
  --color-ivory: #f9f6f2;
  --color-muted-gold: #a28a74;
  --color-charcoal: #1f1a17;
  --color-almond: #e9e6e2;
  --color-white: #ffffff;
}

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: #6b5e53;
  --role-link: #6b5e53;
  --role-btn-primary-bg: #6b5e53;
  --role-btn-outlined-border: #6b5e53;
  --role-btn-outlined-text: #6b5e53;
  --role-headline: #6b5e53;
  --role-bg-light: #f9f6f2;
  --role-btn-secondary-bg: #f9f6f2;
  --role-icon: #a28a74;
  --role-border: #a28a74;
  --role-divider: #a28a74;
  --role-outline: #a28a74;
  --role-bg-dark: #1f1a17;
  --role-text: #1f1a17;
  --role-btn-secondary-text: #1f1a17;
  --role-btn-primary-text: #ffffff;
}

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.
{
    "taupe": "#6b5e53",
    "ivory": "#f9f6f2",
    "muted-gold": "#a28a74",
    "charcoal": "#1f1a17",
    "almond": "#e9e6e2",
    "white": "#ffffff"
}
Press Space to load new palette