This luxury-style minimal palette uses rich Cocoa and warm Ivory tones for a sophisticated and clean brand presence enhanced with muted Burgundy and soft Taupe accents, supported by balanced neutrals for strong contrast and readability.
This luxury-style minimal palette uses rich Cocoa and warm Ivory tones for a sophisticated and clean brand presence enhanced with muted Burgundy and soft Taupe accents, supported by balanced neutrals for strong contrast and readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors Cocoa, Burgundy, and Ivory create an elegant and warm analogous harmony that evokes luxury through sophisticated warm tones and pleasant tonal transitions.
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 Cocoa, Burgundy, and Ivory create an elegant and warm analogous harmony that evokes luxury through sophisticated warm tones and pleasant tonal transitions.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Cocoa grounds the palette with a rich and deep brown that conveys stability and luxury, providing a strong recognizable base for brand identity.
#6b5e53107, 94, 8328, 13, 370, 12, 22, 58RolesHeadline, Btn Secondary Bg
Burgundy adds an understated elegance with its warm wine tone, enhancing the luxurious feel while complementing Cocoa warmly.
#7a4e57122, 78, 87348, 22, 390, 36, 29, 52Ivory introduces warmth and softness to the palette, balancing the darker main colors with a pristine and inviting lightness.
#f9f6f2249, 246, 24234, 37, 960, 1, 3, 2The support colors Taupe and Warm Gray extend the main palette by providing subtle muted accents that maintain luxury tones without overpowering the main colors, ensuring quiet refinement and balance.
RolesIcon, Border, Divider, Outline
Taupe supports the palette by adding a gentle muted brownish-gray that harmonizes with Cocoa and Burgundy, enhancing usability elements with understated elegance.
#a8998e168, 153, 14225, 13, 610, 9, 15, 34Warm Gray offers a soft neutral accent that complements Ivory and the main warm hues, lending a versatile and quiet sophistication to secondary textual elements.
#bfb6ad191, 182, 17330, 12, 710, 5, 9, 25Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#ffffff255, 255, 2550, 0, 1000, 0, 0, 0#f9f6f2249, 246, 24234, 37, 960, 1, 3, 2RolesBg Dark, Text
#2c2a2844, 42, 4030, 5, 160, 5, 9, 83Copy 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-cocoa: #6b5e53;
--color-burgundy: #7a4e57;
--color-ivory: #f9f6f2;
--color-taupe: #a8998e;
--color-warm-gray: #bfb6ad;
--color-white: #ffffff;
--color-charcoal: #2c2a28;
}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: #7a4e57;
--role-btn-secondary-bg: #7a4e57;
--role-icon: #a8998e;
--role-border: #a8998e;
--role-divider: #a8998e;
--role-outline: #a8998e;
--role-bg-light: #ffffff;
--role-btn-primary-text: #ffffff;
--role-btn-secondary-text: #ffffff;
--role-bg-dark: #2c2a28;
--role-text: #2c2a28;
}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": "#6b5e53",
"burgundy": "#7a4e57",
"ivory": "#f9f6f2",
"taupe": "#a8998e",
"warm-gray": "#bfb6ad",
"white": "#ffffff",
"charcoal": "#2c2a28"
}