This palette translates the image’s warm creams, earthy golds, and bright apothecary orange into a polished system that feels natural, inviting, and lightly premium. The colors work together as a grounded, sun-warmed brand set with enough contrast for clear digital hierarchy and product-forward storytelling.
This palette translates the image’s warm creams, earthy golds, and bright apothecary orange into a polished system that feels natural, inviting, and lightly premium. The colors work together as a grounded, sun-warmed brand set with enough contrast for clear digital hierarchy and product-forward storytelling.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay in the same warm family, moving from creamy beige to amber orange for a cohesive, recognizable system. Their close relationship keeps the palette soothing and natural while still giving the brand a distinct product and call-to-action color.
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 stay in the same warm family, moving from creamy beige to amber orange for a cohesive, recognizable system. Their close relationship keeps the palette soothing and natural while still giving the brand a distinct product and call-to-action color.
RolesLogo, Btn Secondary Bg
Golden Beige brings the image’s soft sunlit warmth and gives the brand a calm, natural base with enough character to feel premium.
#DDBE7A221, 190, 12241, 59, 670, 14, 45, 13RolesLink, Btn Primary Bg
Burnt Orange adds energy and recognition, making key actions and links feel confident, vivid, and product-led.
#D96A22217, 106, 3424, 73, 490, 51, 84, 15RolesBtn Outlined Border, Btn Outlined Text, Headline
Antique Brass adds a grounded, refined note that supports hierarchy without competing with the brighter orange accent.
#A98A57169, 138, 8737, 32, 500, 18, 49, 34The support colors extend the warm palette with restrained earthy depth and a muted herbal counterbalance. They help with structure, iconography, and subtle emphasis while keeping the visual system cohesive and subdued.
RolesIcon, Border
Sage Moss softens the warmth with a muted botanical tone that supports interface structure without drawing focus away from the main colors.
#75806A117, 128, 10690, 9, 469, 0, 17, 50RolesDivider, Outline
Camel Tan reinforces the natural, earthy feeling and provides a quiet transitional tone for lines and interface framing.
#8E7656142, 118, 8634, 25, 450, 17, 39, 44Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#F6F1E8246, 241, 23239, 44, 940, 2, 6, 4#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#1F1A1731, 26, 2323, 15, 110, 16, 26, 88Copy 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-golden-beige: #DDBE7A;
--color-burnt-orange: #D96A22;
--color-antique-brass: #A98A57;
--color-sage-moss: #75806A;
--color-camel-tan: #8E7656;
--color-ivory: #F6F1E8;
--color-white: #FFFFFF;
--color-charcoal: #1F1A17;
}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: #DDBE7A;
--role-btn-secondary-bg: #DDBE7A;
--role-link: #D96A22;
--role-btn-primary-bg: #D96A22;
--role-btn-outlined-border: #A98A57;
--role-btn-outlined-text: #A98A57;
--role-headline: #A98A57;
--role-icon: #75806A;
--role-border: #75806A;
--role-divider: #8E7656;
--role-outline: #8E7656;
--role-bg-light: #F6F1E8;
--role-bg-dark: #1F1A17;
--role-text: #1F1A17;
--role-btn-primary-text: #1F1A17;
--role-btn-secondary-text: #1F1A17;
}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.{
"golden-beige": "#DDBE7A",
"burnt-orange": "#D96A22",
"antique-brass": "#A98A57",
"sage-moss": "#75806A",
"camel-tan": "#8E7656",
"ivory": "#F6F1E8",
"white": "#FFFFFF",
"charcoal": "#1F1A17"
}