This palette pairs a deep navy with refined gold and soft sage to create a quiet sense of luxury without visual excess. The clean neutrals keep the system minimal and highly legible across brand and interface uses.
This palette pairs a deep navy with refined gold and soft sage to create a quiet sense of luxury without visual excess. The clean neutrals keep the system minimal and highly legible across brand and interface uses.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Deep navy and muted gold establish a premium, composed foundation, while soft sage adds a restrained contemporary note. Together they feel upscale and minimal, with enough contrast to stay distinctive across digital and identity applications.
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 muted gold establish a premium, composed foundation, while soft sage adds a restrained contemporary note. Together they feel upscale and minimal, with enough contrast to stay distinctive across digital and identity applications.
RolesLogo, Link, Btn Primary Bg, Headline
Navy anchors the brand with depth and authority, giving the palette a timeless luxury presence.
#0B1F3A11, 31, 58214, 68, 1481, 47, 0, 77RolesBtn Secondary Bg, Btn Outlined Border
Antique Gold adds a warm premium accent that signals value without becoming flashy.
#B08D57176, 141, 8736, 36, 520, 20, 51, 31RolesBtn Outlined Text
Sage softens the system with a muted organic note that keeps the palette calm and modern.
#8FA39A143, 163, 154153, 10, 6012, 0, 6, 36The support colors broaden usability by adding subtle depth and balance around the main luxury tones. They stay quiet and understated so the palette remains minimal and focused.
RolesIcon, Outline
Sand bridges the gold and neutrals with a subdued warmth that supports elegant UI details.
#D6C4A1214, 196, 16140, 39, 740, 8, 25, 16RolesBorder, Divider
Slate introduces a cool structural gray that keeps edges crisp without drawing attention away from the main colors.
#A7B0B6167, 176, 182204, 9, 688, 3, 0, 29Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F1EA244, 241, 23442, 31, 940, 1, 4, 4RolesBg Dark, Text, Btn Secondary Text
#17171723, 23, 230, 0, 90, 0, 0, 91Copy 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: #0B1F3A;
--color-antique-gold: #B08D57;
--color-sage: #8FA39A;
--color-sand: #D6C4A1;
--color-slate: #A7B0B6;
--color-white: #FFFFFF;
--color-ivory: #F4F1EA;
--color-charcoal: #171717;
}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: #0B1F3A;
--role-link: #0B1F3A;
--role-btn-primary-bg: #0B1F3A;
--role-headline: #0B1F3A;
--role-btn-secondary-bg: #B08D57;
--role-btn-outlined-border: #B08D57;
--role-btn-outlined-text: #8FA39A;
--role-icon: #D6C4A1;
--role-outline: #D6C4A1;
--role-border: #A7B0B6;
--role-divider: #A7B0B6;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #171717;
--role-text: #171717;
--role-btn-secondary-text: #171717;
}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": "#0B1F3A",
"antique-gold": "#B08D57",
"sage": "#8FA39A",
"sand": "#D6C4A1",
"slate": "#A7B0B6",
"white": "#FFFFFF",
"ivory": "#F4F1EA",
"charcoal": "#171717"
}