This palette channels the vibrant and playful energy of the image's bright pinks with complementary warm accents and balancing neutrals, forming a lively yet harmonious system perfect for creative and bold brand identities.
This palette channels the vibrant and playful energy of the image's bright pinks with complementary warm accents and balancing neutrals, forming a lively yet harmonious system perfect for creative and bold brand identities.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form an analogous scheme of bright pinks and reds that create a vibrant and eye-catching visual impact, establishing strong brand recognition.
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 form an analogous scheme of bright pinks and reds that create a vibrant and eye-catching visual impact, establishing strong brand recognition.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Shocking Pink is bold and energetic, conveying excitement and youthful vibrancy essential for standout brand presence.
#FF2D70255, 45, 112341, 100, 590, 82, 56, 0RolesBtn Secondary Bg
Coral Red adds warmth and approachability, complementing the primary pink while remaining distinct for secondary actions.
#FF5973255, 89, 115351, 100, 670, 65, 55, 0RolesHeadline
Tomato Red provides a strong, lively accent that supports headlines and key emphasis without overpowering main colors.
#FC5C63252, 92, 99357, 96, 670, 63, 61, 1Support colors extend the main palette with softer, warm tones and a muted complementary orange that balances the intensity, enabling versatile usage across interfaces.
RolesIcon, Border, Divider, Outline
Light Salmon offers a gentle warmth that complements the reds and pinks by providing subtle contrast for icons and borders.
#FFA07A255, 160, 12217, 100, 740, 37, 52, 0Dark Salmon deepens the palette's warmth and adds depth for use in interface elements requiring differentiation without harsh contrast.
#E9967A233, 150, 12215, 72, 700, 36, 48, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F0E6F0240, 230, 240300, 25, 920, 4, 0, 6RolesText, Btn Primary Text, Btn Secondary Text
#3A2D3B58, 45, 59296, 13, 202, 24, 0, 77Copy 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-shocking-pink: #FF2D70;
--color-coral-red: #FF5973;
--color-tomato-red: #FC5C63;
--color-light-salmon: #FFA07A;
--color-dark-salmon: #E9967A;
--color-white: #FFFFFF;
--color-lavender-mist: #F0E6F0;
--color-dark-charcoal: #3A2D3B;
}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: #FF2D70;
--role-link: #FF2D70;
--role-btn-primary-bg: #FF2D70;
--role-btn-outlined-border: #FF2D70;
--role-btn-outlined-text: #FF2D70;
--role-btn-secondary-bg: #FF5973;
--role-headline: #FC5C63;
--role-icon: #FFA07A;
--role-border: #FFA07A;
--role-divider: #FFA07A;
--role-outline: #FFA07A;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F0E6F0;
--role-text: #3A2D3B;
--role-btn-primary-text: #3A2D3B;
--role-btn-secondary-text: #3A2D3B;
}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.{
"shocking-pink": "#FF2D70",
"coral-red": "#FF5973",
"tomato-red": "#FC5C63",
"light-salmon": "#FFA07A",
"dark-salmon": "#E9967A",
"white": "#FFFFFF",
"lavender-mist": "#F0E6F0",
"dark-charcoal": "#3A2D3B"
}