This palette pairs a deep refined green with muted gold and soft stone neutrals to feel luxurious without visual clutter. The contrast stays crisp and minimal, giving the brand a restrained premium presence across identity and interface.
This palette pairs a deep refined green with muted gold and soft stone neutrals to feel luxurious without visual clutter. The contrast stays crisp and minimal, giving the brand a restrained premium presence across identity and interface.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Deep Emerald and Antique Gold create a recognizable luxury pairing with strong contrast, while Forest Green adds depth for a more dimensional and editorial feel. Together they read as premium, restrained, and distinctive without relying on excess ornament.
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 Emerald and Antique Gold create a recognizable luxury pairing with strong contrast, while Forest Green adds depth for a more dimensional and editorial feel. Together they read as premium, restrained, and distinctive without relying on excess ornament.
RolesLogo, Btn Primary Bg, Headline
This deep green anchors the brand with a calm, high-end presence that feels mature and confident.
#0F3D3415, 61, 52168, 61, 1575, 0, 15, 76RolesLink, Btn Outlined Border, Btn Outlined Text
This muted gold adds a quiet sense of value and distinction without becoming flashy.
#B08D57176, 141, 8736, 36, 520, 20, 51, 31RolesBtn Secondary Bg
This darker supporting green extends the palette with depth and keeps the system cohesive in layered layouts.
#244C3A36, 76, 58153, 36, 2253, 0, 24, 70The support accents soften the main contrast and add usability cues while staying understated. They reinforce the palette with refined tonal balance rather than introducing a new visual direction.
RolesIcon, Border
This warm taupe bridges the greens and gold with an elegant neutral accent that works well for UI structure.
#8A8072138, 128, 11435, 10, 490, 7, 17, 46RolesDivider, Outline
This muted beige adds a quiet separator tone that preserves the minimal feel in frames and dividers.
#C7B8A6199, 184, 16633, 23, 720, 8, 17, 22Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F1EA245, 241, 23438, 35, 940, 2, 4, 4RolesBg Dark, Text
#16161622, 22, 220, 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-deep-emerald: #0F3D34;
--color-antique-gold: #B08D57;
--color-forest-green: #244C3A;
--color-warm-taupe: #8A8072;
--color-oatmeal: #C7B8A6;
--color-white: #FFFFFF;
--color-ivory: #F5F1EA;
--color-charcoal: #161616;
}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: #0F3D34;
--role-btn-primary-bg: #0F3D34;
--role-headline: #0F3D34;
--role-link: #B08D57;
--role-btn-outlined-border: #B08D57;
--role-btn-outlined-text: #B08D57;
--role-btn-secondary-bg: #244C3A;
--role-icon: #8A8072;
--role-border: #8A8072;
--role-divider: #C7B8A6;
--role-outline: #C7B8A6;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #161616;
--role-text: #161616;
}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.{
"deep-emerald": "#0F3D34",
"antique-gold": "#B08D57",
"forest-green": "#244C3A",
"warm-taupe": "#8A8072",
"oatmeal": "#C7B8A6",
"white": "#FFFFFF",
"ivory": "#F5F1EA",
"charcoal": "#161616"
}