This palette captures the light, pastel aesthetic of the bakery interior, combining soft pinks, muted blues, and warm beige tones for a fresh, inviting look. The main colors focus on a gentle warm rose and pastel blue for brand recognition and warmth, while support colors add subtle balance and enhance usability. Neutral tones provide clean, readable contrasts.
This palette captures the light, pastel aesthetic of the bakery interior, combining soft pinks, muted blues, and warm beige tones for a fresh, inviting look. The main colors focus on a gentle warm rose and pastel blue for brand recognition and warmth, while support colors add subtle balance and enhance usability. Neutral tones provide clean, readable contrasts.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors are a gentle warm rose and pastel blue, connected by their cool, muted tones, forming a complementary palette that is visually harmonious and comforting. These colors define the brand's inviting and fresh atmosphere.
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 are a gentle warm rose and pastel blue, connected by their cool, muted tones, forming a complementary palette that is visually harmonious and comforting. These colors define the brand's inviting and fresh atmosphere.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Warm Rose conveys softness, warmth, and approachability, embodying the cozy, welcoming vibe of the bakery environment.
#EAA7B5234, 167, 181347, 61, 790, 29, 23, 8RolesBtn Secondary Bg, Headline
Powder Blue adds calmness and freshness, balancing warmth with a clean, airy feeling.
#A9D6E5169, 214, 229195, 54, 7826, 7, 0, 10Support colors reinforce the pastel theme with gentle warm beige and a soft minty green to balance the blues and warm rose, providing subtle accents without overwhelming the main palette.
RolesIcon, Border, Divider, Outline
Warm Beige complements the warm rose with a neutral warmth that provides grounding and enhances readability.
#F0E3CA240, 227, 20239, 56, 870, 5, 16, 6Soft Mint introduces a hint of freshness that balances the palette's warm and cool tones gracefully.
#C9E4D4201, 228, 212144, 33, 8412, 0, 7, 11Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F9F8F7249, 248, 24730, 14, 970, 0, 1, 2RolesText, Btn Primary Text, Btn Secondary Text
#5A5A5A90, 90, 900, 0, 350, 0, 0, 65Copy 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-warm-rose: #EAA7B5;
--color-powder-blue: #A9D6E5;
--color-warm-beige: #F0E3CA;
--color-soft-mint: #C9E4D4;
--color-pure-white: #FFFFFF;
--color-off-white: #F9F8F7;
--color-charcoal-gray: #5A5A5A;
}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: #EAA7B5;
--role-link: #EAA7B5;
--role-btn-primary-bg: #EAA7B5;
--role-btn-outlined-border: #EAA7B5;
--role-btn-outlined-text: #EAA7B5;
--role-btn-secondary-bg: #A9D6E5;
--role-headline: #A9D6E5;
--role-icon: #F0E3CA;
--role-border: #F0E3CA;
--role-divider: #F0E3CA;
--role-outline: #F0E3CA;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F9F8F7;
--role-text: #5A5A5A;
--role-btn-primary-text: #5A5A5A;
--role-btn-secondary-text: #5A5A5A;
}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.{
"warm-rose": "#EAA7B5",
"powder-blue": "#A9D6E5",
"warm-beige": "#F0E3CA",
"soft-mint": "#C9E4D4",
"pure-white": "#FFFFFF",
"off-white": "#F9F8F7",
"charcoal-gray": "#5A5A5A"
}