This palette pairs deep, understated color with crisp light neutrals to create a luxury feel that stays minimal and disciplined. The restrained contrast and muted accents make the system feel premium without becoming ornate or theatrical.
This palette pairs deep, understated color with crisp light neutrals to create a luxury feel that stays minimal and disciplined. The restrained contrast and muted accents make the system feel premium without becoming ornate or theatrical.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a deep near-black with a muted champagne accent and a softened cool blue to create a premium system with quiet contrast. Together they feel refined, modern, and intentional while staying minimal enough for high-end digital and brand use.
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 a deep near-black with a muted champagne accent and a softened cool blue to create a premium system with quiet contrast. Together they feel refined, modern, and intentional while staying minimal enough for high-end digital and brand use.
RolesLogo, Btn Primary Bg
Onyx gives the palette a sharp, high-end anchor that feels confident and architectural.
#11111117, 17, 170, 0, 70, 0, 0, 93RolesBtn Secondary Bg, Headline
Champagne adds a restrained sense of warmth and prestige without reading as flashy.
#C7A97A199, 169, 12237, 41, 630, 15, 39, 22RolesLink, Btn Outlined Border, Btn Outlined Text
Slate Blue introduces a cool, polished accent that supports navigation and fine details with calm sophistication.
#6E7B87110, 123, 135209, 10, 4819, 9, 0, 47The support colors extend the palette with soft metallic and smoky tones that keep the interface cohesive and subdued. They add depth and usability while staying clearly subordinate to the main hues.
RolesIcon, Border
Taupe softens hard edges and bridges the warm and cool colors with an elegant neutral accent.
#A79E90167, 158, 14437, 12, 610, 5, 14, 35RolesDivider, Outline
Stone provides a quiet structural tone that works well for rules, outlines, and subtle UI separation.
#8A8176138, 129, 11833, 8, 500, 7, 14, 46Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F1EA245, 241, 23438, 35, 940, 2, 4, 4RolesBg Dark, Text, Btn Secondary Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy 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-onyx: #111111;
--color-champagne: #C7A97A;
--color-slate-blue: #6E7B87;
--color-taupe: #A79E90;
--color-stone: #8A8176;
--color-white: #FFFFFF;
--color-ivory: #F5F1EA;
--color-charcoal: #1A1A1A;
}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: #111111;
--role-btn-primary-bg: #111111;
--role-btn-secondary-bg: #C7A97A;
--role-headline: #C7A97A;
--role-link: #6E7B87;
--role-btn-outlined-border: #6E7B87;
--role-btn-outlined-text: #6E7B87;
--role-icon: #A79E90;
--role-border: #A79E90;
--role-divider: #8A8176;
--role-outline: #8A8176;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #1A1A1A;
--role-text: #1A1A1A;
--role-btn-secondary-text: #1A1A1A;
}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.{
"onyx": "#111111",
"champagne": "#C7A97A",
"slate-blue": "#6E7B87",
"taupe": "#A79E90",
"stone": "#8A8176",
"white": "#FFFFFF",
"ivory": "#F5F1EA",
"charcoal": "#1A1A1A"
}