This pink-centered palette uses a harmonious triadic color scheme to convey a fresh, vibrant, and trustworthy brand identity ideal for beauty and lifestyle brands. The main pink color commands recognition, while the complementary teal and soft coral balance and enrich the system, supported by gentle, subdued accents and strong neutral colors for readability.
This pink-centered palette uses a harmonious triadic color scheme to convey a fresh, vibrant, and trustworthy brand identity ideal for beauty and lifestyle brands. The main pink color commands recognition, while the complementary teal and soft coral balance and enrich the system, supported by gentle, subdued accents and strong neutral colors for readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The triadic use of Coral Pink, Teal Blue, and Soft Tangerine ensures a lively and balanced palette, making the brand easily recognizable and visually welcoming.
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 triadic use of Coral Pink, Teal Blue, and Soft Tangerine ensures a lively and balanced palette, making the brand easily recognizable and visually welcoming.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Coral Pink energizes and attracts attention with warm femininity, ideal for strong brand recognition.
#EC6EA6236, 110, 166333, 77, 680, 53, 30, 7RolesBtn Secondary Bg
Teal Blue introduces a calm, trustworthy counterpoint that conveys balance and professionalism.
#2A9D8F42, 157, 143173, 58, 3973, 0, 9, 38Soft Tangerine adds warmth and subtle energy, complementing the pink and teal with a gentle brightness.
#FF9F7F255, 159, 12715, 100, 750, 38, 50, 0This palette extends the main colors with muted, harmonious accents to soften the bold triadic contrast and support subtle interface elements.
RolesIcon, Border, Divider, Outline
Dusty Rose offers a muted pinkish mauve that supports Coral Pink without competing for attention.
#B5838D181, 131, 141348, 25, 610, 28, 22, 29Sage Green balances with a soft, subdued green undertone that harmonizes well with Teal Blue.
#7FB5A9127, 181, 169167, 27, 6030, 0, 7, 29Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F7F7F7247, 247, 2470, 0, 970, 0, 0, 3RolesText, Btn Primary Text, Btn Secondary Text
#2C2C2C44, 44, 440, 0, 170, 0, 0, 83Copy 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-coral-pink: #EC6EA6;
--color-teal-blue: #2A9D8F;
--color-soft-tangerine: #FF9F7F;
--color-dusty-rose: #B5838D;
--color-sage-green: #7FB5A9;
--color-white: #FFFFFF;
--color-snow: #F7F7F7;
--color-charcoal: #2C2C2C;
}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: #EC6EA6;
--role-link: #EC6EA6;
--role-btn-primary-bg: #EC6EA6;
--role-btn-outlined-border: #EC6EA6;
--role-btn-outlined-text: #EC6EA6;
--role-headline: #EC6EA6;
--role-btn-secondary-bg: #2A9D8F;
--role-icon: #B5838D;
--role-border: #B5838D;
--role-divider: #B5838D;
--role-outline: #B5838D;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F7F7F7;
--role-text: #2C2C2C;
--role-btn-primary-text: #2C2C2C;
--role-btn-secondary-text: #2C2C2C;
}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.{
"coral-pink": "#EC6EA6",
"teal-blue": "#2A9D8F",
"soft-tangerine": "#FF9F7F",
"dusty-rose": "#B5838D",
"sage-green": "#7FB5A9",
"white": "#FFFFFF",
"snow": "#F7F7F7",
"charcoal": "#2C2C2C"
}