This palette uses warm, earthy tones inspired by the coffee and chocolate hues in the logo, paired with complementary rich reds and a grounding olive green to create a cozy, organic, and approachable brand identity.
This palette uses warm, earthy tones inspired by the coffee and chocolate hues in the logo, paired with complementary rich reds and a grounding olive green to create a cozy, organic, and approachable brand identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form an analogous color scheme of warm browns and red-browns, creating a rich, inviting, and organic visual identity with 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 color scheme of warm browns and red-browns, creating a rich, inviting, and organic visual identity with strong brand recognition.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Dark Chocolate provides a deep, rich foundation symbolizing reliability and warmth, perfect for prominent brand elements like the logo and primary buttons.
#5B301091, 48, 1626, 70, 210, 47, 82, 64RolesLink, Btn Secondary Bg, Btn Outlined Text, Headline
Burnt Sienna adds vibrancy and energy while maintaining warmth, ideal for calls-to-action and headers to draw attention without overpowering.
#803212128, 50, 1817, 75, 290, 61, 86, 50Copper Red offers a brighter accent that complements the deeper browns, enhancing brand personality with subtle warmth and approachability.
#A85323168, 83, 3522, 66, 400, 51, 79, 34Support colors introduce an olive green and softer brown to add balance and natural contrast that harmonizes with the warm main colors without competing visually.
RolesIcon, Border, Divider, Outline
Olive Green grounds the palette with a muted, natural tone that complements the warm browns and adds a subtle earthy freshness.
#64723C100, 114, 6076, 31, 3412, 0, 47, 55Soft Chestnut provides a gentle brown accent that supports the primary warm palette by offering tonal variation and depth.
#7A503E122, 80, 6218, 33, 360, 34, 49, 52Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText
#3A2E2A58, 46, 4215, 16, 200, 21, 28, 77Copy 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-dark-chocolate: #5B3010;
--color-burnt-sienna: #803212;
--color-copper-red: #A85323;
--color-olive-green: #64723C;
--color-soft-chestnut: #7A503E;
--color-white: #FFFFFF;
--color-ivory: #F5F5F5;
--color-dark-charcoal: #3A2E2A;
}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: #5B3010;
--role-btn-primary-bg: #5B3010;
--role-btn-outlined-border: #5B3010;
--role-link: #803212;
--role-btn-secondary-bg: #803212;
--role-btn-outlined-text: #803212;
--role-headline: #803212;
--role-icon: #64723C;
--role-border: #64723C;
--role-divider: #64723C;
--role-outline: #64723C;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #3A2E2A;
}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.{
"dark-chocolate": "#5B3010",
"burnt-sienna": "#803212",
"copper-red": "#A85323",
"olive-green": "#64723C",
"soft-chestnut": "#7A503E",
"white": "#FFFFFF",
"ivory": "#F5F5F5",
"dark-charcoal": "#3A2E2A"
}