This palette uses deep cyber-inspired blues and purples as main colors to express a dark, serious tone with a modern technological edge. Support colors in muted cyan and slate extend the mood while providing subtle accents, and neutral colors offer strong contrast for text and backgrounds to ensure readability and clarity in digital interfaces.
This palette uses deep cyber-inspired blues and purples as main colors to express a dark, serious tone with a modern technological edge. Support colors in muted cyan and slate extend the mood while providing subtle accents, and neutral colors offer strong contrast for text and backgrounds to ensure readability and clarity in digital interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a cohesive dark and serious palette anchored in deep cyber blues and violet purples, creating a recognizable look that signals advanced technology and professionalism.
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 form a cohesive dark and serious palette anchored in deep cyber blues and violet purples, creating a recognizable look that signals advanced technology and professionalism.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Midnight Blue lends a strong, serious foundation conveying trust and technical sophistication for the brand's identity elements.
#0A1F4410, 31, 68218, 74, 1585, 54, 0, 73RolesLink, Btn Secondary Bg, Btn Outlined Text
Deep Violet adds a rich cyber tone that evokes creativity and mystery, complementing the blue to maintain a tech-driven yet refined aura.
#391A5E57, 26, 94267, 57, 2439, 72, 0, 63RolesHeadline
Dark Lavender serves as an accent for headlines, introducing a subtle vibrancy that balances the darkness and adds depth to typography.
#522F6B82, 47, 107275, 39, 3023, 56, 0, 58Support colors in muted cyan and soft slate subtly reinforce the main colors by providing neutral yet distinct accents, enhancing usability without distracting from the core palette.
RolesIcon, Border, Divider, Outline
Slate Cyan offers a muted cool tone that complements the dark blues and purples, anchoring interface elements with subtle visual distinction.
#2C6B7F44, 107, 127194, 49, 3465, 16, 0, 50Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesText
#121B2718, 27, 39214, 37, 1154, 31, 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-midnight-blue: #0A1F44;
--color-deep-violet: #391A5E;
--color-dark-lavender: #522F6B;
--color-slate-cyan: #2C6B7F;
--color-pure-white: #FFFFFF;
--color-light-cloud: #F5F7FA;
--color-charcoal-navy: #121B27;
}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: #0A1F44;
--role-btn-primary-bg: #0A1F44;
--role-btn-outlined-border: #0A1F44;
--role-link: #391A5E;
--role-btn-secondary-bg: #391A5E;
--role-btn-outlined-text: #391A5E;
--role-headline: #522F6B;
--role-icon: #2C6B7F;
--role-border: #2C6B7F;
--role-divider: #2C6B7F;
--role-outline: #2C6B7F;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F7FA;
--role-text: #121B27;
}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.{
"midnight-blue": "#0A1F44",
"deep-violet": "#391A5E",
"dark-lavender": "#522F6B",
"slate-cyan": "#2C6B7F",
"pure-white": "#FFFFFF",
"light-cloud": "#F5F7FA",
"charcoal-navy": "#121B27"
}