A Starbucks-inspired palette built around deep forest green, muted coffee-brown, and a warm botanical accent, with crisp neutrals that keep the system readable in digital and print use. The colors feel familiar to the brand world without copying the original marks, giving the palette a premium cafe,
A Starbucks-inspired palette built around deep forest green, muted coffee-brown, and a warm botanical accent, with crisp neutrals that keep the system readable in digital and print use. The colors feel familiar to the brand world without copying the original marks, giving the palette a premium cafe,
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Deep green and espresso brown create the core Starbucks-inspired relationship: one signals the brand’s botanical heritage, the other grounds it in coffee and warmth. The muted herbal accent keeps the system recognizable while adding a fresh
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.
Deep green and espresso brown create the core Starbucks-inspired relationship: one signals the brand’s botanical heritage, the other grounds it in coffee and warmth. The muted herbal accent keeps the system recognizable while adding a fresh
RolesLogo, Btn Primary Bg
A deep, recognizable green that anchors the brand and carries the strongest Starbucks-like identity.
#00573E0, 87, 62163, 100, 17100, 0, 29, 66RolesBtn Secondary Bg, Headline
A rich coffee brown that reinforces the beverage story and adds warmth against the forest green.
#5A3A2990, 58, 4121, 37, 260, 36, 54, 65RolesBtn Outlined Border, Btn Outlined Text
A soft herbal tone that lightens the system and supports outlines without competing with the primary brand colors.
#7A8B5B122, 139, 9181, 21, 4512, 0, 35, 45These accents extend the cafe palette with subtle usability support: one cool green for links and interface cues, one soft natural tone for borders and structure. They stay subdued
RolesLink, Icon
A quieter green accent that echoes the brand core while giving links and icons a lighter, functional voice.
#6F8F73111, 143, 115128, 13, 5022, 0, 20, 44RolesBorder, Divider, Outline
A warm neutralized clay that softens UI structure and complements the coffee-brown without becoming dominant.
#A89A8B168, 154, 13931, 14, 600, 8, 17, 34Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F4F1EA244, 241, 23442, 31, 940, 1, 4, 4RolesText
#14141420, 20, 200, 0, 80, 0, 0, 92Copy 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-cedar-green: #00573E;
--color-espresso-bark: #5A3A29;
--color-herbal-foam: #7A8B5B;
--color-moss-tint: #6F8F73;
--color-roast-clay: #A89A8B;
--color-pure-white: #FFFFFF;
--color-steam-beige: #F4F1EA;
--color-charcoal-roast: #141414;
}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: #00573E;
--role-btn-primary-bg: #00573E;
--role-btn-secondary-bg: #5A3A29;
--role-headline: #5A3A29;
--role-btn-outlined-border: #7A8B5B;
--role-btn-outlined-text: #7A8B5B;
--role-link: #6F8F73;
--role-icon: #6F8F73;
--role-border: #A89A8B;
--role-divider: #A89A8B;
--role-outline: #A89A8B;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F4F1EA;
--role-text: #141414;
}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.{
"cedar-green": "#00573E",
"espresso-bark": "#5A3A29",
"herbal-foam": "#7A8B5B",
"moss-tint": "#6F8F73",
"roast-clay": "#A89A8B",
"pure-white": "#FFFFFF",
"steam-beige": "#F4F1EA",
"charcoal-roast": "#141414"
}