This palette translates the image’s purple-dominant print into a refined brand system with cool violet energy and a subtle warm accent. The result feels editorial and modern while staying practical for interfaces, with clear contrast between promotional elements and usable neutral surfaces.
This palette translates the image’s purple-dominant print into a refined brand system with cool violet energy and a subtle warm accent. The result feels editorial and modern while staying practical for interfaces, with clear contrast between promotional elements and usable neutral surfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within the violet family, echoing the image’s dominant purple print while adding depth and variation for a cohesive branded system. The mix feels recognizable and expressive without becoming overly loud or decorative.
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 stay within the violet family, echoing the image’s dominant purple print while adding depth and variation for a cohesive branded system. The mix feels recognizable and expressive without becoming overly loud or decorative.
RolesLogo, Btn Primary Bg
Violet provides the strongest brand anchor and captures the image’s signature printed color with confident clarity.
#6B4AB8107, 74, 184258, 44, 5142, 60, 0, 28RolesLink, Btn Secondary Bg
Lavender softens the system with a lighter, more approachable purple that works well for interactive elements and highlights.
#8E73D8142, 115, 216256, 56, 6534, 47, 0, 15RolesHeadline, Btn Outlined Border, Btn Outlined Text
Plum adds depth and typographic authority, giving the palette a richer dark tone that supports hierarchy and emphasis.
#4A317E74, 49, 126259, 44, 3441, 61, 0, 51The support colors add a restrained warm-cool balance that reflects the image’s mixed printed surfaces without competing with the violets. They extend usability by giving the palette a subtle accent and a grounded interface tone.
RolesIcon
Copper introduces a controlled warm accent that keeps the palette from feeling too cold and adds energy to small interface details.
#C96A3D201, 106, 6119, 56, 510, 47, 70, 21RolesBorder
Slate acts as a quiet structural tone for edges and separation, supporting the violet hues without stealing attention.
#9AA0A6154, 160, 166210, 6, 637, 4, 0, 35Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F3F0EA243, 240, 23440, 27, 940, 1, 4, 5RolesBg Dark, Divider, Outline, Text, Btn Secondary Text
#15131921, 19, 25260, 14, 916, 24, 0, 90Copy 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-violet: #6B4AB8;
--color-lavender: #8E73D8;
--color-plum: #4A317E;
--color-copper: #C96A3D;
--color-slate: #9AA0A6;
--color-white: #FFFFFF;
--color-ivory: #F3F0EA;
--color-charcoal: #151319;
}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: #6B4AB8;
--role-btn-primary-bg: #6B4AB8;
--role-link: #8E73D8;
--role-btn-secondary-bg: #8E73D8;
--role-headline: #4A317E;
--role-btn-outlined-border: #4A317E;
--role-btn-outlined-text: #4A317E;
--role-icon: #C96A3D;
--role-border: #9AA0A6;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #151319;
--role-divider: #151319;
--role-outline: #151319;
--role-text: #151319;
--role-btn-secondary-text: #151319;
}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.{
"violet": "#6B4AB8",
"lavender": "#8E73D8",
"plum": "#4A317E",
"copper": "#C96A3D",
"slate": "#9AA0A6",
"white": "#FFFFFF",
"ivory": "#F3F0EA",
"charcoal": "#151319"
}