This palette uses a rich Goldenrod with complementary warm and muted support colors to convey luxury and warmth suitable for a brand seeking an elegant and inviting identity. The nuanced Gold main color is balanced by a deep auburn and a soft moss green support, anchored with three distinct neutrals.
This palette uses a rich Goldenrod with complementary warm and muted support colors to convey luxury and warmth suitable for a brand seeking an elegant and inviting identity. The nuanced Gold main color is balanced by a deep auburn and a soft moss green support, anchored with three distinct neutrals.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine the vibrant warmth of Goldenrod with a deep auburn and a fresh moss green to create an elegant and balanced palette with a split complementary harmony that enhances distinctiveness and legibility.
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 the vibrant warmth of Goldenrod with a deep auburn and a fresh moss green to create an elegant and balanced palette with a split complementary harmony that enhances distinctiveness and legibility.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Goldenrod delivers radiant warmth and luxurious appeal, anchoring the brand's identity with timeless sophistication.
#DAA520218, 165, 3243, 74, 490, 24, 85, 15RolesBtn Secondary Bg, Headline
Auburn brings depth and grounding to the palette, offering a strong, rich contrast to Goldenrod while maintaining warmth.
#7B3F00123, 63, 031, 100, 240, 49, 100, 52Moss Green adds a subtle natural freshness that complements and softens the warmth of the gold and auburn hues.
#768B42118, 139, 6677, 36, 4015, 0, 53, 45The support colors enrich the palette with harmonious, muted earthly tones that subtly reinforce the luxurious and natural feel without competing with the primary golden hues.
RolesIcon, Border, Divider, Outline
Taupe provides a neutral earthy tone that supports iconography and interface elements, balancing the brighter golds with subtlety.
#836953131, 105, 8328, 22, 420, 20, 37, 49Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, Btn Primary Text
#2E2E2E46, 46, 460, 0, 180, 0, 0, 82Copy 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-goldenrod: #DAA520;
--color-auburn: #7B3F00;
--color-moss-green: #768B42;
--color-taupe: #836953;
--color-white: #FFFFFF;
--color-cultured: #F5F5F5;
--color-charcoal: #2E2E2E;
}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: #DAA520;
--role-link: #DAA520;
--role-btn-primary-bg: #DAA520;
--role-btn-outlined-border: #DAA520;
--role-btn-outlined-text: #DAA520;
--role-btn-secondary-bg: #7B3F00;
--role-headline: #7B3F00;
--role-icon: #836953;
--role-border: #836953;
--role-divider: #836953;
--role-outline: #836953;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #2E2E2E;
--role-btn-primary-text: #2E2E2E;
}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.{
"goldenrod": "#DAA520",
"auburn": "#7B3F00",
"moss-green": "#768B42",
"taupe": "#836953",
"white": "#FFFFFF",
"cultured": "#F5F5F5",
"charcoal": "#2E2E2E"
}