A soft nebula-inspired system that pairs misty blue-violet light with luminous lavender and deep midnight indigo. The palette feels modern and whimsical while staying structured enough for clear UI hierarchy and brand recognition.
A soft nebula-inspired system that pairs misty blue-violet light with luminous lavender and deep midnight indigo. The palette feels modern and whimsical while staying structured enough for clear UI hierarchy and brand recognition.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a cool blue-to-violet range, creating a coherent nebula-like identity that feels recognizable across logo, links, and UI accents. Their close relationship gives the brand a soft, futuristic mood without becoming
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 a cool blue-to-violet range, creating a coherent nebula-like identity that feels recognizable across logo, links, and UI accents. Their close relationship gives the brand a soft, futuristic mood without becoming
RolesLogo, Btn Primary Bg
Provides the clearest brand anchor, balancing approachability with a polished digital feel.
#6B7FD7107, 127, 215229, 57, 6350, 41, 0, 16RolesLink, Btn Secondary Bg
Adds a more expressive adjacent hue that keeps interaction states lively and distinctive.
#8E6AD8142, 106, 216260, 59, 6334, 51, 0, 15RolesHeadline, Btn Outlined Border, Btn Outlined Text
Brings depth and authority, making the system feel grounded and improving visibility for outlined treatments.
#3F4F9A63, 79, 154229, 42, 4359, 49, 0, 40The support accents extend the nebula mood with cooler, softer notes that reinforce the main hues instead of competing with them. They are intentionally subdued so they can support
RolesIcon, Border
Softens the palette with a calm cyan-teal accent that works well for subtle UI signals and separators.
#72C8C6114, 200, 198179, 44, 6243, 0, 1, 22RolesDivider, Outline
Echoes the violet family in a lighter, quieter way, ideal for delicate structural elements and passive emphasis.
#B79FE8183, 159, 232260, 61, 7721, 31, 0, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#EDF1FA237, 241, 250222, 57, 955, 4, 0, 2RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#11142617, 20, 38231, 38, 1155, 47, 0, 85Copy 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-cloud-blue: #6B7FD7;
--color-bloom-violet: #8E6AD8;
--color-dusk-indigo: #3F4F9A;
--color-misted-aqua: #72C8C6;
--color-lavender-glow: #B79FE8;
--color-pure-white: #FFFFFF;
--color-frost-white: #EDF1FA;
--color-deep-ink: #111426;
}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: #6B7FD7;
--role-btn-primary-bg: #6B7FD7;
--role-link: #8E6AD8;
--role-btn-secondary-bg: #8E6AD8;
--role-headline: #3F4F9A;
--role-btn-outlined-border: #3F4F9A;
--role-btn-outlined-text: #3F4F9A;
--role-icon: #72C8C6;
--role-border: #72C8C6;
--role-divider: #B79FE8;
--role-outline: #B79FE8;
--role-bg-light: #FFFFFF;
--role-bg-dark: #111426;
--role-text: #111426;
--role-btn-primary-text: #111426;
--role-btn-secondary-text: #111426;
}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.{
"cloud-blue": "#6B7FD7",
"bloom-violet": "#8E6AD8",
"dusk-indigo": "#3F4F9A",
"misted-aqua": "#72C8C6",
"lavender-glow": "#B79FE8",
"pure-white": "#FFFFFF",
"frost-white": "#EDF1FA",
"deep-ink": "#111426"
}