This BERO-inspired palette blends beer-toned warmth with a sage green accent to widen the brand system without losing its crafted, premium feel. The amber, malt, and cocoa hues keep the identity grounded and appetizing, while sage and the quiet earth supports add freshness and balance for digital use.
This BERO-inspired palette blends beer-toned warmth with a sage green accent to widen the brand system without losing its crafted, premium feel. The amber, malt, and cocoa hues keep the identity grounded and appetizing, while sage and the quiet earth supports add freshness and balance for digital use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine warm beer notes with a muted sage accent, creating a recognizable system that feels both crafted and contemporary. The palette keeps enough tonal contrast for clear hierarchy while staying anchored in a premium beverage mood.
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 warm beer notes with a muted sage accent, creating a recognizable system that feels both crafted and contemporary. The palette keeps enough tonal contrast for clear hierarchy while staying anchored in a premium beverage mood.
RolesLogo, Btn Primary Bg
Amber carries the strongest poured-glass energy and gives the brand its most immediate warmth and recognition.
#A65A2A166, 90, 4223, 60, 410, 46, 75, 35RolesLink, Headline
Cocoa adds depth and editorial seriousness, making it effective for links and strong headline treatment.
#6B3F2A107, 63, 4219, 44, 290, 41, 61, 58RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Sage introduces a calmer botanical counterpoint that freshens the palette and gives outlined and secondary UI elements a clear, distinct voice.
#8A9B78138, 155, 12089, 15, 5411, 0, 23, 39The support colors extend the warm core with muted, earthy notes that keep the interface balanced and usable. They remain subordinate to the main colors while helping with structure, separation, and subtle interface detail.
RolesIcon, Border
Barley softens the system with a grain-like warmth that works well for icons and understated borders.
#B68A5A182, 138, 9031, 39, 530, 24, 51, 29RolesDivider, Outline
Oak adds a restrained woody tone that helps dividers and outlines feel natural and grounded.
#7A5C4A122, 92, 7423, 24, 380, 25, 39, 52Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4EFE6244, 239, 23039, 39, 930, 2, 6, 4RolesBg Dark, 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-amber: #A65A2A;
--color-cocoa: #6B3F2A;
--color-sage: #8A9B78;
--color-barley: #B68A5A;
--color-oak: #7A5C4A;
--color-white: #FFFFFF;
--color-ivory: #F4EFE6;
--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: #A65A2A;
--role-btn-primary-bg: #A65A2A;
--role-link: #6B3F2A;
--role-headline: #6B3F2A;
--role-btn-secondary-bg: #8A9B78;
--role-btn-outlined-border: #8A9B78;
--role-btn-outlined-text: #8A9B78;
--role-icon: #B68A5A;
--role-border: #B68A5A;
--role-divider: #7A5C4A;
--role-outline: #7A5C4A;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #1F1A17;
--role-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.{
"amber": "#A65A2A",
"cocoa": "#6B3F2A",
"sage": "#8A9B78",
"barley": "#B68A5A",
"oak": "#7A5C4A",
"white": "#FFFFFF",
"ivory": "#F4EFE6",
"charcoal": "#1F1A17"
}