This palette balances vibrant and elegant hues reflecting a fresh, creative, and confident luxury fashion brand. The bold Magenta and warm Gold create strong recognition, while the Soft Coral and Slate accents enhance versatility and refinement. Neutrals offer clarity and legibility that uphold the brand's premium feeling.
This palette balances vibrant and elegant hues reflecting a fresh, creative, and confident luxury fashion brand. The bold Magenta and warm Gold create strong recognition, while the Soft Coral and Slate accents enhance versatility and refinement. Neutrals offer clarity and legibility that uphold the brand's premium feeling.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
Magenta, Gold, and Soft Coral form a split complementary harmony that captures energy and warmth while standing out as a recognizable and fresh luxury brand system.
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.
Magenta, Gold, and Soft Coral form a split complementary harmony that captures energy and warmth while standing out as a recognizable and fresh luxury brand system.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Magenta conveys a bold and creative energy, representing the brand's innovative and self-assured spirit.
#B8007F184, 0, 127319, 100, 360, 100, 31, 28RolesBtn Secondary Bg, Headline
Gold introduces a classic luxurious feel that balances magenta’s vibrant energy with warmth and refinement.
#D4AF37212, 175, 5546, 65, 520, 17, 74, 17Soft Coral extends the warmth and injects vitality, emphasizing freshness and freedom.
#FF6F61255, 111, 975, 100, 690, 56, 62, 0Slate and Pale Gray provide subtle, subdued accents that complement the main vibrant colors without overpowering them, maintaining a refined and cohesive look.
RolesIcon, Border, Divider, Outline
Slate adds a cool, grounding contrast that balances the warmth of gold and coral, while reinforcing sophistication.
#657785101, 119, 133206, 14, 4624, 11, 0, 48Pale Gray supports as a soft, restrained shade that adds spatial relief and enhances the vibrancy of main colors.
#E6E8EB230, 232, 235216, 11, 912, 1, 0, 8Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F8FA247, 248, 250220, 23, 971, 1, 0, 2RolesBg Dark, Text, Btn Secondary Text
#22222234, 34, 340, 0, 130, 0, 0, 87Copy 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-magenta: #B8007F;
--color-gold: #D4AF37;
--color-coral: #FF6F61;
--color-slate: #657785;
--color-pale-gray: #E6E8EB;
--color-white: #FFFFFF;
--color-ghost-white: #F7F8FA;
--color-charcoal: #222222;
}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: #B8007F;
--role-link: #B8007F;
--role-btn-primary-bg: #B8007F;
--role-btn-outlined-border: #B8007F;
--role-btn-outlined-text: #B8007F;
--role-btn-secondary-bg: #D4AF37;
--role-headline: #D4AF37;
--role-icon: #657785;
--role-border: #657785;
--role-divider: #657785;
--role-outline: #657785;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #222222;
--role-text: #222222;
--role-btn-secondary-text: #222222;
}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.{
"magenta": "#B8007F",
"gold": "#D4AF37",
"coral": "#FF6F61",
"slate": "#657785",
"pale-gray": "#E6E8EB",
"white": "#FFFFFF",
"ghost-white": "#F7F8FA",
"charcoal": "#222222"
}