This palette translates the image’s playful pink-to-orange energy into a cleaner, more strategic system with strong brand recognition. The warm main hues feel expressive and modern, while the cool support tones and precise neutrals keep the palette usable across interfaces and identity work.
This palette translates the image’s playful pink-to-orange energy into a cleaner, more strategic system with strong brand recognition. The warm main hues feel expressive and modern, while the cool support tones and precise neutrals keep the palette usable across interfaces and identity work.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors work together as a vivid warm-to-magenta family that echoes the uploaded image while staying cohesive for branding and UI use. Their close hue relationship creates a recognizable, energetic system without fragmenting the visual identity.
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 work together as a vivid warm-to-magenta family that echoes the uploaded image while staying cohesive for branding and UI use. Their close hue relationship creates a recognizable, energetic system without fragmenting the visual identity.
RolesLogo, Link, Btn Outlined Border, Btn Outlined Text
Orchid Pink gives the palette its signature brand presence with a vivid, fashionable edge.
#C43F86196, 63, 134328, 53, 510, 68, 32, 23RolesBtn Primary Bg
Coral adds warmth and momentum, making primary actions feel lively and approachable.
#E35D4E227, 93, 786, 73, 600, 59, 66, 11RolesHeadline, Btn Secondary Bg
Amethyst adds depth and contrast, giving headlines and secondary actions a more refined voice.
#8E4FD1142, 79, 209269, 59, 5632, 62, 0, 18These support colors extend the warm main palette with softer, quieter accents that improve balance and hierarchy. They stay subordinate while adding flexibility for icons, surfaces, and fine UI details.
RolesIcon, Outline
Apricot softens the palette with a mellow golden accent that bridges the warm main hues.
#D8A76A216, 167, 10633, 59, 630, 23, 51, 15RolesBorder
Rose Quartz adds a gentle blush tone that supports structure without competing for attention.
#F2C9CF242, 201, 207351, 61, 870, 17, 14, 5Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F6F1EB246, 241, 23533, 38, 940, 2, 4, 4RolesDivider, Text, Btn Primary Text
#1E1E2430, 30, 36240, 9, 1317, 17, 0, 86Copy 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-orchid-pink: #C43F86;
--color-coral: #E35D4E;
--color-amethyst: #8E4FD1;
--color-apricot: #D8A76A;
--color-rose-quartz: #F2C9CF;
--color-white: #FFFFFF;
--color-ivory: #F6F1EB;
--color-charcoal: #1E1E24;
}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: #C43F86;
--role-link: #C43F86;
--role-btn-outlined-border: #C43F86;
--role-btn-outlined-text: #C43F86;
--role-btn-primary-bg: #E35D4E;
--role-headline: #8E4FD1;
--role-btn-secondary-bg: #8E4FD1;
--role-icon: #D8A76A;
--role-outline: #D8A76A;
--role-border: #F2C9CF;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F6F1EB;
--role-divider: #1E1E24;
--role-text: #1E1E24;
--role-btn-primary-text: #1E1E24;
}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.{
"orchid-pink": "#C43F86",
"coral": "#E35D4E",
"amethyst": "#8E4FD1",
"apricot": "#D8A76A",
"rose-quartz": "#F2C9CF",
"white": "#FFFFFF",
"ivory": "#F6F1EB",
"charcoal": "#1E1E24"
}