A tight monochromatic violet system built for an AI color palette builder, with bright purple energy balanced by soft lilac surfaces and a deep indigo anchor. The palette stays minimal and product-led while preserving clear hierarchy across branding, actions, and interface elements.
A tight monochromatic violet system built for an AI color palette builder, with bright purple energy balanced by soft lilac surfaces and a deep indigo anchor. The palette stays minimal and product-led while preserving clear hierarchy across branding, actions, and interface elements.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
These violet and indigo tones form a compact monochromatic system that feels precise, modern, and distinctly AI-oriented. The brighter hues keep the brand approachable, while the deep violet provides contrast and hierarchy for key type and actions.
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.
These violet and indigo tones form a compact monochromatic system that feels precise, modern, and distinctly AI-oriented. The brighter hues keep the brand approachable, while the deep violet provides contrast and hierarchy for key type and actions.
RolesLogo, Btn Primary Bg
A bright violet that gives the brand a confident, recognizable signature and strong primary-action presence.
#7B61FF123, 97, 255250, 100, 6952, 62, 0, 0RolesLink, Btn Secondary Bg, Btn Outlined Border
A lighter violet that supports links and secondary UI treatments with a calm, approachable tone.
#AFA0FF175, 160, 255249, 100, 8131, 37, 0, 0RolesHeadline, Btn Outlined Text
A near-black indigo that adds authority and crisp editorial contrast for headlines and core messaging.
#15026921, 2, 105251, 96, 2180, 98, 0, 59The support tints extend the violet system into quieter surface and boundary roles, adding usability without introducing a competing hue direction. They keep the interface soft, organized, and visually consistent.
RolesIcon, Border
A pale lilac that quietly softens icons and borders while staying aligned with the main violet family.
#C9BEFF201, 190, 255250, 100, 8721, 25, 0, 0RolesDivider, Outline
An airy lilac tint that keeps dividers and outlines subtle, light, and unobtrusive.
#E6E1FF230, 225, 255250, 100, 9410, 12, 0, 0Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F6F5FB246, 245, 251250, 43, 972, 2, 0, 2RolesBg Dark, Text, Btn Secondary Text
#16132022, 19, 32254, 25, 1031, 41, 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-vivid-violet: #7B61FF;
--color-soft-violet: #AFA0FF;
--color-deep-indigo: #150269;
--color-pale-lilac: #C9BEFF;
--color-ghost-lilac: #E6E1FF;
--color-pure-white: #FFFFFF;
--color-cloud-white: #F6F5FB;
--color-ink-black: #161320;
}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: #7B61FF;
--role-btn-primary-bg: #7B61FF;
--role-link: #AFA0FF;
--role-btn-secondary-bg: #AFA0FF;
--role-btn-outlined-border: #AFA0FF;
--role-headline: #150269;
--role-btn-outlined-text: #150269;
--role-icon: #C9BEFF;
--role-border: #C9BEFF;
--role-divider: #E6E1FF;
--role-outline: #E6E1FF;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #161320;
--role-text: #161320;
--role-btn-secondary-text: #161320;
}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.{
"vivid-violet": "#7B61FF",
"soft-violet": "#AFA0FF",
"deep-indigo": "#150269",
"pale-lilac": "#C9BEFF",
"ghost-lilac": "#E6E1FF",
"pure-white": "#FFFFFF",
"cloud-white": "#F6F5FB",
"ink-black": "#161320"
}