This palette pairs deep Navy and refined Gold with a restrained Plum accent to create a luxurious system that feels calm, premium, and understated. The white, ivory, and charcoal neutrals keep the interface minimal while preserving strong hierarchy and crisp readability.
This palette pairs deep Navy and refined Gold with a restrained Plum accent to create a luxurious system that feels calm, premium, and understated. The white, ivory, and charcoal neutrals keep the interface minimal while preserving strong hierarchy and crisp readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Deep Navy and warm Gold establish a polished luxury foundation, while muted Plum adds a subtle editorial note that keeps the system distinctive without feeling ornate. Together they create a restrained high-end palette with clear visual hierarchy and a minimal, memorable character.
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.
Deep Navy and warm Gold establish a polished luxury foundation, while muted Plum adds a subtle editorial note that keeps the system distinctive without feeling ornate. Together they create a restrained high-end palette with clear visual hierarchy and a minimal, memorable character.
RolesLogo, Btn Primary Bg, Headline
Navy gives the brand a composed, expensive feel and anchors the identity with quiet authority.
#16283D22, 40, 61212, 47, 1664, 34, 0, 76RolesLink, Btn Outlined Border, Btn Outlined Text
Gold adds a warm metallic note that signals quality and provides a clear premium accent for interactive elements.
#C8A24A200, 162, 7442, 53, 540, 19, 63, 22RolesBtn Secondary Bg
Plum introduces a subdued secondary emphasis that feels elegant and helps diversify the palette without breaking its restraint.
#7A5C6E122, 92, 110324, 14, 420, 25, 10, 52The support colors extend the palette with soft, tonal accents that keep the system serene and usable rather than decorative. They add depth and subtle structure while staying visually subordinate to the main colors.
RolesIcon, Divider
Mist adds a cool, muted balancing tone that supports structure without competing with the main hues.
#A7B0B7167, 176, 183206, 10, 699, 4, 0, 28RolesBorder, Outline
Taupe brings a warm neutral edge that softens surfaces and keeps lines elegant in minimalist layouts.
#8D8478141, 132, 12034, 8, 510, 6, 15, 45Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F3F0EA243, 240, 23440, 27, 940, 1, 4, 5RolesBg Dark, 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-navy: #16283D;
--color-gold: #C8A24A;
--color-plum: #7A5C6E;
--color-mist: #A7B0B7;
--color-taupe: #8D8478;
--color-white: #FFFFFF;
--color-ivory: #F3F0EA;
--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: #16283D;
--role-btn-primary-bg: #16283D;
--role-headline: #16283D;
--role-link: #C8A24A;
--role-btn-outlined-border: #C8A24A;
--role-btn-outlined-text: #C8A24A;
--role-btn-secondary-bg: #7A5C6E;
--role-icon: #A7B0B7;
--role-divider: #A7B0B7;
--role-border: #8D8478;
--role-outline: #8D8478;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #1A1A1A;
--role-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.{
"navy": "#16283D",
"gold": "#C8A24A",
"plum": "#7A5C6E",
"mist": "#A7B0B7",
"taupe": "#8D8478",
"white": "#FFFFFF",
"ivory": "#F3F0EA",
"charcoal": "#1A1A1A"
}