This palette features a harmonious blend of vibrant and soft pinks with harmonious lavender and blush accents, balanced by clean, contrasting neutrals to create a playful yet sophisticated girly identity.
This palette features a harmonious blend of vibrant and soft pinks with harmonious lavender and blush accents, balanced by clean, contrasting neutrals to create a playful yet sophisticated girly identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a cohesive and recognizable system by combining vibrant Pink Rose with soft Lavender and a brighter Bubblegum Pink, all within the analogous pink to purple hues.
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 create a cohesive and recognizable system by combining vibrant Pink Rose with soft Lavender and a brighter Bubblegum Pink, all within the analogous pink to purple hues.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Pink Rose brings energetic vibrancy and youthful charm critical for a lively girly brand identity.
#E91E63233, 30, 99340, 82, 520, 87, 58, 9RolesHeadline, Btn Secondary Bg
Lavender adds a soft, dreamy quality helping to balance and complement the stronger pink tones.
#D1A0FF209, 160, 255271, 100, 8118, 37, 0, 0Bubblegum Pink provides a bright, clear contrast that enhances button text readability against deeper pink backgrounds.
#FF6EB4255, 110, 180331, 100, 720, 57, 29, 0The support colors introduce gentle blush and soft rose shades that extend and soften the primary pink hues, enriching the palette's feminine and delicate appeal without overpowering the main colors.
RolesIcon, Border, Divider, Outline
Blush offers subtle warmth and softness to support the brand's girly personality, harmonizing with the main pinks and lavender.
#F9E0EB249, 224, 235334, 68, 930, 10, 6, 2Soft Rose provides a muted accent that complements the vibrant Pink Rose and connects smoothly to Lavender hues, reinforcing the palette's harmony.
#F2C2D8242, 194, 216333, 65, 850, 20, 11, 5Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F6F6F6246, 246, 2460, 0, 960, 0, 0, 4RolesText, Btn Secondary Text
#330D1A51, 13, 26339, 59, 130, 75, 49, 80Copy 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-pink-rose: #E91E63;
--color-lavender: #D1A0FF;
--color-bubblegum-pink: #FF6EB4;
--color-blush: #F9E0EB;
--color-soft-rose: #F2C2D8;
--color-ivory: #FFFFFF;
--color-pearl-white: #F6F6F6;
--color-charcoal-plum: #330D1A;
}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: #E91E63;
--role-link: #E91E63;
--role-btn-primary-bg: #E91E63;
--role-btn-outlined-border: #E91E63;
--role-btn-outlined-text: #E91E63;
--role-headline: #D1A0FF;
--role-btn-secondary-bg: #D1A0FF;
--role-icon: #F9E0EB;
--role-border: #F9E0EB;
--role-divider: #F9E0EB;
--role-outline: #F9E0EB;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F6F6F6;
--role-text: #330D1A;
--role-btn-secondary-text: #330D1A;
}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.{
"pink-rose": "#E91E63",
"lavender": "#D1A0FF",
"bubblegum-pink": "#FF6EB4",
"blush": "#F9E0EB",
"soft-rose": "#F2C2D8",
"ivory": "#FFFFFF",
"pearl-white": "#F6F6F6",
"charcoal-plum": "#330D1A"
}