This coffee-inspired palette pairs rich espresso and roasted mocha with a warm caramel accent, creating a grounded system that feels aromatic, premium, and inviting. Soft cream and deep charcoal keep the interface readable while the brown-toned accents preserve a cohesive café character.
This coffee-inspired palette pairs rich espresso and roasted mocha with a warm caramel accent, creating a grounded system that feels aromatic, premium, and inviting. Soft cream and deep charcoal keep the interface readable while the brown-toned accents preserve a cohesive café character.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
These coffee tones work together because they move naturally from dark roasted brown to warm milk chocolate and golden caramel, echoing the visual language of a well-crafted cup. The result is a recognizable café system that feels warm, premium, and easy to apply across print and digital touchpoints.
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.
These coffee tones work together because they move naturally from dark roasted brown to warm milk chocolate and golden caramel, echoing the visual language of a well-crafted cup. The result is a recognizable café system that feels warm, premium, and easy to apply across print and digital touchpoints.
RolesLogo, Btn Primary Bg
Espresso gives the brand its strongest anchor and delivers the deepest coffee reference in the system.
#5A3A2E90, 58, 4616, 32, 270, 36, 49, 65RolesHeadline
Mocha softens the palette with a smoother roasted tone that supports headlines without overpowering the darker espresso.
#8B5E3C139, 94, 6026, 40, 390, 32, 57, 45RolesLink, Btn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Caramel adds warmth and motion, helping interactive elements feel inviting while staying firmly within the coffee family.
#C68B59198, 139, 8928, 49, 560, 30, 55, 22The support colors extend the coffee palette with subtle depth and warmth, adding useful tonal variation without competing with the main roasted browns. They improve balance for interface details and secondary surfaces while keeping the overall mood calm and cohesive.
RolesIcon, Border
Latte bridges the dark browns and lighter neutrals, making interface details feel softened and approachable.
#7A6A58122, 106, 8832, 16, 410, 13, 28, 52RolesDivider, Outline
Toffee introduces a muted warm accent that is useful for subtle structure and visual separation without drawing focus away from the main palette.
#B79A7A183, 154, 12231, 30, 600, 16, 33, 28Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F6F1EA246, 241, 23435, 40, 940, 2, 5, 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-espresso: #5A3A2E;
--color-mocha: #8B5E3C;
--color-caramel: #C68B59;
--color-latte: #7A6A58;
--color-toffee: #B79A7A;
--color-white: #FFFFFF;
--color-ivory: #F6F1EA;
--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: #5A3A2E;
--role-btn-primary-bg: #5A3A2E;
--role-headline: #8B5E3C;
--role-link: #C68B59;
--role-btn-secondary-bg: #C68B59;
--role-btn-outlined-border: #C68B59;
--role-btn-outlined-text: #C68B59;
--role-icon: #7A6A58;
--role-border: #7A6A58;
--role-divider: #B79A7A;
--role-outline: #B79A7A;
--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.{
"espresso": "#5A3A2E",
"mocha": "#8B5E3C",
"caramel": "#C68B59",
"latte": "#7A6A58",
"toffee": "#B79A7A",
"white": "#FFFFFF",
"ivory": "#F6F1EA",
"charcoal": "#1F1A17"
}