This palette draws inspiration from the rich yellows, warm golds, and contrasting dark tones of the mineral specimen, creating a balanced and striking color system ideal for brands needing a natural yet luxurious aesthetic.
This palette draws inspiration from the rich yellows, warm golds, and contrasting dark tones of the mineral specimen, creating a balanced and striking color system ideal for brands needing a natural yet luxurious aesthetic.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The three main colors capture the essence of the mineral with a rich deep gold, a warm amber gold, and a contrasting muted dark charcoal, forming a distinctive and balanced visual identity.
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 three main colors capture the essence of the mineral with a rich deep gold, a warm amber gold, and a contrasting muted dark charcoal, forming a distinctive and balanced visual identity.
RolesLogo, Link, Btn Primary Bg
Goldenrod conveys richness and warmth, making the brand appear inviting and prestigious.
#BFA24F191, 162, 7944, 47, 530, 15, 59, 25RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Amber adds brightness and energy for supporting brand elements while complementing the primary gold.
#D9B44A217, 180, 7444, 65, 570, 17, 66, 15RolesHeadline
Charcoal provides a strong, grounding contrast that enhances readability and sophistication.
#3B3A3659, 58, 5448, 4, 220, 2, 8, 77The support colors subtly extend the warmth of the gold tones with a muted orange brown and a soft olive, balancing and reinforcing the main colors while remaining visually subordinate.
RolesIcon, Border, Divider, Outline
Ochre offers a muted orange-brown that enriches the palette with an earthy accent, supporting the gold tones.
#A57C28165, 124, 4040, 61, 400, 25, 76, 35Olive Drift introduces a gentle greenish hue that stabilizes the warmth and adds natural balance.
#7C7942124, 121, 6657, 31, 370, 2, 47, 51Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F2F2F2242, 242, 2420, 0, 950, 0, 0, 5RolesText, Btn Primary Text, Btn Secondary Text
#1C1B1A28, 27, 2630, 4, 110, 4, 7, 89Copy 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: #BFA24F;
--color-amber: #D9B44A;
--color-charcoal: #3B3A36;
--color-ochre: #A57C28;
--color-olive-drift: #7C7942;
--color-pure-white: #FFFFFF;
--color-ivory: #F2F2F2;
--color-rich-black: #1C1B1A;
}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: #BFA24F;
--role-link: #BFA24F;
--role-btn-primary-bg: #BFA24F;
--role-btn-secondary-bg: #D9B44A;
--role-btn-outlined-border: #D9B44A;
--role-btn-outlined-text: #D9B44A;
--role-headline: #3B3A36;
--role-icon: #A57C28;
--role-border: #A57C28;
--role-divider: #A57C28;
--role-outline: #A57C28;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F2F2F2;
--role-text: #1C1B1A;
--role-btn-primary-text: #1C1B1A;
--role-btn-secondary-text: #1C1B1A;
}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": "#BFA24F",
"amber": "#D9B44A",
"charcoal": "#3B3A36",
"ochre": "#A57C28",
"olive-drift": "#7C7942",
"pure-white": "#FFFFFF",
"ivory": "#F2F2F2",
"rich-black": "#1C1B1A"
}