This palette channels Katy Perry’s playful pop energy with vivid, stage-ready color that still reads as a usable brand system. Electric magenta, violet-blue, and coral work together as a high-contrast trio that feels glamorous, bold, and unmistakably performance-driven.
This palette channels Katy Perry’s playful pop energy with vivid, stage-ready color that still reads as a usable brand system. Electric magenta, violet-blue, and coral work together as a high-contrast trio that feels glamorous, bold, and unmistakably performance-driven.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a bright triadic system that captures Katy Perry’s candy-pop energy without collapsing into one-note pink. Their distinct hue spacing keeps the palette lively, memorable, and flexible across branding and UI.
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 a bright triadic system that captures Katy Perry’s candy-pop energy without collapsing into one-note pink. Their distinct hue spacing keeps the palette lively, memorable, and flexible across branding and UI.
RolesLogo, Btn Primary Bg
Hot Pink delivers the unmistakable pop-star signature and creates instant visual recognition.
#FF3BA7255, 59, 167327, 100, 620, 77, 35, 0RolesLink, Headline
Violet adds a sleek, electric edge that balances the sweetness of the pink with a cooler stage-light feel.
#6D4CFF109, 76, 255251, 100, 6557, 70, 0, 0RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Coral brings warmth and movement, keeping the palette energetic while giving the interface a bright supporting accent.
#FF6B5A255, 107, 906, 100, 680, 58, 65, 0The support colors extend the pop palette with softer, darker counterpoints that help the vivid main colors perform in real layouts. They stay restrained so the system feels polished rather than overloaded.
RolesIcon, Outline
Mauve softens the high-voltage main colors and gives icons and outlines a graceful middle tone.
#7A5C8E122, 92, 142276, 21, 4614, 35, 0, 44RolesBorder, Divider
Taupe grounds the palette with a warm neutral accent that supports structure without stealing attention.
#8A6F54138, 111, 8430, 24, 440, 20, 39, 46Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F6F1FA246, 241, 250273, 47, 962, 4, 0, 2RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#1E1A2430, 26, 36264, 16, 1217, 28, 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-hot-pink: #FF3BA7;
--color-violet: #6D4CFF;
--color-coral: #FF6B5A;
--color-mauve: #7A5C8E;
--color-taupe: #8A6F54;
--color-white: #FFFFFF;
--color-ivory: #F6F1FA;
--color-charcoal: #1E1A24;
}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: #FF3BA7;
--role-btn-primary-bg: #FF3BA7;
--role-link: #6D4CFF;
--role-headline: #6D4CFF;
--role-btn-secondary-bg: #FF6B5A;
--role-btn-outlined-border: #FF6B5A;
--role-btn-outlined-text: #FF6B5A;
--role-icon: #7A5C8E;
--role-outline: #7A5C8E;
--role-border: #8A6F54;
--role-divider: #8A6F54;
--role-bg-light: #FFFFFF;
--role-bg-dark: #1E1A24;
--role-text: #1E1A24;
--role-btn-primary-text: #1E1A24;
--role-btn-secondary-text: #1E1A24;
}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.{
"hot-pink": "#FF3BA7",
"violet": "#6D4CFF",
"coral": "#FF6B5A",
"mauve": "#7A5C8E",
"taupe": "#8A6F54",
"white": "#FFFFFF",
"ivory": "#F6F1FA",
"charcoal": "#1E1A24"
}