This palette turns a soft lavender-to-indigo progression into a calm, editorial brand system with enough depth for clear UI hierarchy. The light-to-dark chromatic range keeps the identity recognizable while the muted violet accents add sophistication without feeling ornamental.
This palette turns a soft lavender-to-indigo progression into a calm, editorial brand system with enough depth for clear UI hierarchy. The light-to-dark chromatic range keeps the identity recognizable while the muted violet accents add sophistication without feeling ornamental.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors move through a restrained lavender family into indigo, creating a coherent identity that feels elegant, calm, and visually memorable. Their close relationship makes the palette easy to recognize across logos, headlines, and interface accents.
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 move through a restrained lavender family into indigo, creating a coherent identity that feels elegant, calm, and visually memorable. Their close relationship makes the palette easy to recognize across logos, headlines, and interface accents.
RolesLogo, Btn Secondary Bg
Soft Lavender provides the most approachable brand signal and keeps the identity airy and refined.
#8E77A8142, 119, 168268, 22, 5615, 29, 0, 34RolesLink, Headline, Btn Outlined Border
Dusty Periwinkle adds structure and credibility while staying harmonized with the softer violet tones.
#5C739892, 115, 152217, 25, 4839, 24, 0, 40RolesBtn Primary Bg
Ink Indigo anchors the palette with depth and creates a strong focal point for primary actions.
#1F2E5231, 46, 82222, 45, 2262, 44, 0, 68The support colors extend the palette with subdued rose and slate-violet notes that improve hierarchy without competing with the core lavender-indigo story. They add flexibility for icons and subtle UI surfaces while staying quiet enough to preserve brand focus.
RolesIcon, Btn Outlined Text
Muted Orchid softens secondary interactions and gives outlined text a graceful, slightly warmer edge.
#B79AAE183, 154, 174319, 17, 660, 16, 5, 28RolesBorder, Divider, Outline
Slate Mulberry provides practical contrast for rules and UI framing while echoing the palette’s cool violet undertones.
#6E677F110, 103, 127258, 10, 4513, 19, 0, 50Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F5F1F7245, 241, 247280, 27, 961, 2, 0, 3RolesBg Dark, Text, Btn Secondary Text
#14111820, 17, 24266, 17, 817, 29, 0, 91Copy 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-soft-lavender: #8E77A8;
--color-dusty-periwinkle: #5C7398;
--color-ink-indigo: #1F2E52;
--color-muted-orchid: #B79AAE;
--color-slate-mulberry: #6E677F;
--color-pure-white: #FFFFFF;
--color-porcelain-mist: #F5F1F7;
--color-near-black: #141118;
}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: #8E77A8;
--role-btn-secondary-bg: #8E77A8;
--role-link: #5C7398;
--role-headline: #5C7398;
--role-btn-outlined-border: #5C7398;
--role-btn-primary-bg: #1F2E52;
--role-icon: #B79AAE;
--role-btn-outlined-text: #B79AAE;
--role-border: #6E677F;
--role-divider: #6E677F;
--role-outline: #6E677F;
--role-btn-primary-text: #FFFFFF;
--role-bg-light: #F5F1F7;
--role-bg-dark: #141118;
--role-text: #141118;
--role-btn-secondary-text: #141118;
}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.{
"soft-lavender": "#8E77A8",
"dusty-periwinkle": "#5C7398",
"ink-indigo": "#1F2E52",
"muted-orchid": "#B79AAE",
"slate-mulberry": "#6E677F",
"pure-white": "#FFFFFF",
"porcelain-mist": "#F5F1F7",
"near-black": "#141118"
}