This palette combines warm gold tones inspired by the bee motif with soft grays and deep contrasts, creating a recognizable, elegant, and natural color system reflecting the essence of bees and honey.
This palette combines warm gold tones inspired by the bee motif with soft grays and deep contrasts, creating a recognizable, elegant, and natural color system reflecting the essence of bees and honey.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form an analogous harmony of warm golds and yellows, creating a vivid yet natural look that mirrors the hues of honey and bee imagery for strong brand recognition.
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 form an analogous harmony of warm golds and yellows, creating a vivid yet natural look that mirrors the hues of honey and bee imagery for strong brand recognition.
RolesLogo, Link, Btn Primary Bg
Gold provides a rich, luxurious warmth that symbolizes value and quality, ideal for the brand's logo and primary call to actions.
#D4AF37212, 175, 5546, 65, 520, 17, 74, 17RolesBtn Outlined Border, Btn Outlined Text, Headline, Btn Secondary Bg
Honey Yellow is a lighter, softer yellow that complements Gold by adding brightness and approachability, perfect for outline accents and headlines.
#F2D26B242, 210, 10746, 84, 680, 13, 56, 5The support colors are soft grays that extend the palette by balancing the vibrant golds and yellows with neutrality and subtlety, preserving focus on the main colors.
RolesIcon, Border, Divider, Outline
Warm Gray offers a subdued, earthy tone that supports the warmth of gold without overpowering, perfect for interface elements.
#A39E93163, 158, 14741, 8, 610, 3, 10, 36Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesText, Btn Primary Text, Btn Secondary Text
#1C1C1C28, 28, 280, 0, 110, 0, 0, 89RolesBg Dark
#2F2F2F47, 47, 470, 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-gold: #D4AF37;
--color-honey-yellow: #F2D26B;
--color-warm-gray: #A39E93;
--color-white: #FFFFFF;
--color-charcoal: #1C1C1C;
--color-dark-gray: #2F2F2F;
}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: #D4AF37;
--role-link: #D4AF37;
--role-btn-primary-bg: #D4AF37;
--role-btn-outlined-border: #F2D26B;
--role-btn-outlined-text: #F2D26B;
--role-headline: #F2D26B;
--role-btn-secondary-bg: #F2D26B;
--role-icon: #A39E93;
--role-border: #A39E93;
--role-divider: #A39E93;
--role-outline: #A39E93;
--role-bg-light: #FFFFFF;
--role-text: #1C1C1C;
--role-btn-primary-text: #1C1C1C;
--role-btn-secondary-text: #1C1C1C;
--role-bg-dark: #2F2F2F;
}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.{
"gold": "#D4AF37",
"honey-yellow": "#F2D26B",
"warm-gray": "#A39E93",
"white": "#FFFFFF",
"charcoal": "#1C1C1C",
"dark-gray": "#2F2F2F"
}