Cocoa Brown#6b5e53
Ivory#f9f6f2
Dusty Lavender#8a7f87
Slate Gray#7c7a81
Dusty Lavender#8a7f87
Palette direction

Cocoa Ivory Luxury Color Palette

This luxury palette combines deep Cocoa and soft Ivory as main anchors to convey elegance and sophistication without gold or sand tones. Muted Slate and Dusty Lavender support the brand with subtle color extensions that enhance depth and refinement, while strong neutral off-white, light pearl, and dark charcoal create contrast and legibility across packaging and brand elements.

MonochromaticLuxury And Lifestyleluxuryelegantpackagingbranding
palette-preview.example
Luxury And Lifestyle color direction

Cocoa Ivory Luxury Color Palette

This luxury palette combines deep Cocoa and soft Ivory as main anchors to convey elegance and sophistication without gold or sand tones. Muted Slate and Dusty Lavender support the brand with subtle color extensions that enhance depth and refinement, while strong neutral off-white, light pearl, and dark charcoal create contrast and legibility across packaging and brand elements.

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 #2E2A28on Ivory #F9F6F213.2:1 Excellent
Logo Ivory #F9F6F2on Cocoa Brown #6B5E535.8:1 Strong
Logo Charcoal #2E2A28on Pearl #E7E3DF11.1:1 Excellent
Icon color
BackgroundCocoa Brown#6b5e53TextIvory#f9f6f2
Primary Button5.82:1
AA

Best for the main action users should notice first.

BackgroundIvory#f9f6f2TextCharcoal#2e2a28
Secondary Button13.19:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#f9f6f2TextCocoa Brown#6b5e53
Outlined Button5.82:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#f9f6f2TextCocoa Brown#6b5e53
Text Button5.82:1
AA

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

Palette composition8 colorsMonochromatic color relationship
9:41Cocoa 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.

CCocoa Ivory Luxury Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

Cocoa and Ivory anchor the palette with warm luxury tones that harmonize for a recognizable, refined system. These mostly neutral browns complemented by soft muted hues form an elegant and sophisticated identity.

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

Buttons

Primary Button
BackgroundCocoa Brown #6b5e53
TextIvory #f9f6f2
Secondary Button
BackgroundIvory #f9f6f2
TextCharcoal #2e2a28
Outlined Button
BackgroundCocoa Brown #6b5e53
TextCocoa Brown #6b5e53

Interface

TextDefault readable body text.Charcoal #2e2a28
Bg LightLight page or section background.Ivory #f9f6f2
Bg DarkDark page or section background.Charcoal #2e2a28
IconSmall interface icons and marks.Slate Gray #7c7a81
BorderCards, inputs, and component borders.Slate Gray #7c7a81
DividerSubtle separators between content.Slate Gray #7c7a81
OutlineFocus rings and emphasis outlines.Slate Gray #7c7a81

Palette Colors

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

Main (Brand) Colors

Cocoa and Ivory anchor the palette with warm luxury tones that harmonize for a recognizable, refined system. These mostly neutral browns complemented by soft muted hues form an elegant and sophisticated identity.

PrimaryCocoa Brown

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

Cocoa Brown projects richness and understated luxury to form a strong, grounded brand foundation.

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

RolesBg Light, Btn Secondary Bg

Ivory provides a soft, luxurious backdrop evoking sophistication and calmness without harshness.

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

Dusty Lavender adds subtle refinement and muted elegance that gently extends the main palette's warmth.

HEX#8a7f87
RGB138, 127, 135
HSL316, 4, 52
CMYK0, 8, 2, 46

Support Colors

Slate and Dusty Lavender are muted and subdued accents that add dimension and balance to the palette without overpowering the main luxury tones.

Slate Gray

RolesIcon, Border, Divider, Outline

Slate Gray complements Cocoa Brown by offering a cool, neutral contrast for edges and small graphic elements that anchors the brand visually.

HEX#7c7a81
RGB124, 122, 129
HSL257, 3, 49
CMYK4, 5, 0, 49
Dusty Lavender

Dusty Lavender gently enhances the palette with a quiet, elegant hue that balances warmth and depth in support accents.

HEX#8a7f87
RGB138, 127, 135
HSL316, 4, 52
CMYK0, 8, 2, 46

Neutral Colors

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

Ivory

RolesBtn Primary Text

HEX#f9f6f2
RGB249, 246, 242
HSL34, 37, 96
CMYK0, 1, 3, 2
Pearl
HEX#e7e3df
RGB231, 227, 223
HSL30, 14, 89
CMYK0, 2, 3, 9
Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#2e2a28
RGB46, 42, 40
HSL20, 7, 17
CMYK0, 9, 13, 82

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-cocoa-brown: #6b5e53;
  --color-ivory: #f9f6f2;
  --color-dusty-lavender: #8a7f87;
  --color-slate-gray: #7c7a81;
  --color-pearl: #e7e3df;
  --color-charcoal: #2e2a28;
}

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: #7c7a81;
  --role-border: #7c7a81;
  --role-divider: #7c7a81;
  --role-outline: #7c7a81;
  --role-btn-primary-text: #f9f6f2;
  --role-bg-dark: #2e2a28;
  --role-text: #2e2a28;
  --role-btn-secondary-text: #2e2a28;
}

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.
{
    "cocoa-brown": "#6b5e53",
    "ivory": "#f9f6f2",
    "dusty-lavender": "#8a7f87",
    "slate-gray": "#7c7a81",
    "pearl": "#e7e3df",
    "charcoal": "#2e2a28"
}
Press Space to load new palette