This palette turns the image's soft blush, cream, and pale butter tones into a warm, polished identity with an airy, editorial feel. It works as a cohesive system because the main colors stay close in luminosity while the deeper accent adds structure without breaking the gentle mood.
This palette turns the image's soft blush, cream, and pale butter tones into a warm, polished identity with an airy, editorial feel. It works as a cohesive system because the main colors stay close in luminosity while the deeper accent adds structure without breaking the gentle mood.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
These main colors sit in a warm, neighboring range that echoes the image’s soft pastel bands while still giving the brand a clear visual hierarchy. The palette feels elegant and approachable because the pink, cream, and golden tones share a gentle luminosity with just enough separation to stay recognizable.
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 main colors sit in a warm, neighboring range that echoes the image’s soft pastel bands while still giving the brand a clear visual hierarchy. The palette feels elegant and approachable because the pink, cream, and golden tones share a gentle luminosity with just enough separation to stay recognizable.
RolesLogo, Btn Secondary Bg
Petal Blush adds a tender, human warmth that makes the brand feel inviting and softly premium.
#F7B9CE247, 185, 206340, 79, 850, 25, 17, 3RolesHeadline, Btn Outlined Border
Almond Cream introduces a refined warmth that keeps the system grounded and visually polished.
#F5DAB4245, 218, 18035, 76, 830, 11, 27, 4RolesLink, Btn Primary Bg, Btn Outlined Text
Buttermilk Glow brings a brighter accent that signals action while preserving the palette’s delicate character.
#F8F0A8248, 240, 16854, 85, 820, 3, 32, 3The support colors extend the warm pastels with muted depth and a soft rosy bridge, so they reinforce the main palette without competing for attention. They help the interface feel complete by adding gentle structure and a subtle editorial contrast.
RolesIcon, Border
Dusty Apricot adds a muted warm accent that supports icons and borders without overpowering the lighter main colors.
#D7A18F215, 161, 14315, 47, 700, 25, 33, 16RolesDivider, Outline
Rose Taupe deepens the blush family just enough to define dividers and outlines with quiet elegance.
#C98B9A201, 139, 154345, 36, 670, 31, 23, 21Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F9F3EA249, 243, 23436, 56, 950, 2, 6, 2RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#1E1A1730, 26, 2326, 13, 100, 13, 23, 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-petal-blush: #F7B9CE;
--color-almond-cream: #F5DAB4;
--color-buttermilk-glow: #F8F0A8;
--color-dusty-apricot: #D7A18F;
--color-rose-taupe: #C98B9A;
--color-pure-white: #FFFFFF;
--color-porcelain: #F9F3EA;
--color-charcoal-ink: #1E1A17;
}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: #F7B9CE;
--role-btn-secondary-bg: #F7B9CE;
--role-headline: #F5DAB4;
--role-btn-outlined-border: #F5DAB4;
--role-link: #F8F0A8;
--role-btn-primary-bg: #F8F0A8;
--role-btn-outlined-text: #F8F0A8;
--role-icon: #D7A18F;
--role-border: #D7A18F;
--role-divider: #C98B9A;
--role-outline: #C98B9A;
--role-bg-light: #FFFFFF;
--role-bg-dark: #1E1A17;
--role-text: #1E1A17;
--role-btn-primary-text: #1E1A17;
--role-btn-secondary-text: #1E1A17;
}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.{
"petal-blush": "#F7B9CE",
"almond-cream": "#F5DAB4",
"buttermilk-glow": "#F8F0A8",
"dusty-apricot": "#D7A18F",
"rose-taupe": "#C98B9A",
"pure-white": "#FFFFFF",
"porcelain": "#F9F3EA",
"charcoal-ink": "#1E1A17"
}