This palette translates Starbucks-inspired green-forward branding into a clean digital system with deep evergreen authority, softer coffee-leaf support, and restrained neutrals for readability. It keeps the recognizable coffeehouse feel while using only Starbucks-like colors to separate brand moments, actions, and interface structure.
This palette translates Starbucks-inspired green-forward branding into a clean digital system with deep evergreen authority, softer coffee-leaf support, and restrained neutrals for readability. It keeps the recognizable coffeehouse feel while using only Starbucks-like colors to separate brand moments, actions, and interface structure.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a recognizable Starbucks-style green family, pairing deep evergreen with fresher green and muted olive tones. Together they create a branded system that feels familiar, premium, and clearly coffeehouse-led across identity and interface use.
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 within a recognizable Starbucks-style green family, pairing deep evergreen with fresher green and muted olive tones. Together they create a branded system that feels familiar, premium, and clearly coffeehouse-led across identity and interface use.
RolesLogo, Btn Primary Bg
This signature green anchors the brand and delivers the strongest Starbucks-inspired recognition in the system.
#00754A0, 117, 74158, 100, 23100, 0, 37, 54RolesLink, Headline
This slightly fresher green adds emphasis and keeps headlines and links aligned with the core coffeehouse tone.
#1E7F5A30, 127, 90157, 62, 3176, 0, 29, 50RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
This muted green supports buttons and outlines with a grounded, earthy note that stays subordinate to the main brand green.
#5B6E5291, 110, 82101, 15, 3817, 0, 25, 57The support colors extend the palette with subtle coffee and nature cues, adding depth without competing with the signature greens. They help balance interfaces and broaden the system for accents, structure, and restrained warmth.
RolesIcon, Border
This soft sage works as a calm structural accent that bridges the stronger greens and the neutrals.
#9CAF88156, 175, 13689, 20, 6111, 0, 22, 31RolesDivider, Outline
This coffee-toned brown adds a warm, grounded counterpoint that feels natural in a Starbucks-inspired context.
#8B6B4F139, 107, 7928, 28, 430, 23, 43, 45Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F1EA244, 241, 23442, 31, 940, 1, 4, 4RolesBg Dark, Text
#1B1B1B27, 27, 270, 0, 110, 0, 0, 89Copy 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-starbucks-green: #00754A;
--color-forest-green: #1E7F5A;
--color-olive-green: #5B6E52;
--color-sage: #9CAF88;
--color-cinnamon: #8B6B4F;
--color-white: #FFFFFF;
--color-ivory: #F4F1EA;
--color-charcoal: #1B1B1B;
}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: #00754A;
--role-btn-primary-bg: #00754A;
--role-link: #1E7F5A;
--role-headline: #1E7F5A;
--role-btn-secondary-bg: #5B6E52;
--role-btn-outlined-border: #5B6E52;
--role-btn-outlined-text: #5B6E52;
--role-icon: #9CAF88;
--role-border: #9CAF88;
--role-divider: #8B6B4F;
--role-outline: #8B6B4F;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #1B1B1B;
--role-text: #1B1B1B;
}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.{
"starbucks-green": "#00754A",
"forest-green": "#1E7F5A",
"olive-green": "#5B6E52",
"sage": "#9CAF88",
"cinnamon": "#8B6B4F",
"white": "#FFFFFF",
"ivory": "#F4F1EA",
"charcoal": "#1B1B1B"
}