This palette is inspired by the striking contrast and mysterious elegance of the black and white celestial design, combining deep black tones with luminous white and subtle metallic silver accents to evoke a futuristic and sophisticated brand identity.
This palette is inspired by the striking contrast and mysterious elegance of the black and white celestial design, combining deep black tones with luminous white and subtle metallic silver accents to evoke a futuristic and sophisticated brand identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a rich black, crisp white, and a medium silver, creating a bold yet balanced system that feels both futuristic and timeless.
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 combine a rich black, crisp white, and a medium silver, creating a bold yet balanced system that feels both futuristic and timeless.
RolesLogo, Link, Btn Primary Bg
Black conveys mystery, sophistication, and power as the foundational anchor of the palette.
#0000000, 0, 00, 0, 00, 0, 0, 100RolesBg Light
White provides clarity, contrast, and purity, enhancing readability and visual impact.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesHeadline, Btn Secondary Bg
Silver adds a refined metallic touch that evokes modernity and high-tech elegance.
#C0C0C0192, 192, 1920, 0, 750, 0, 0, 25Support colors extend the palette with muted grays and cool metallic tones, reinforcing the futuristic mood while remaining understated and complementary.
RolesIcon, Border, Divider
Slate Gray offers a soft, neutral support that balances the palette with subtle depth.
#60606096, 96, 960, 0, 380, 0, 0, 62RolesOutline, Btn Outlined Border, Btn Outlined Text
Dark Silver provides a cooler metallic accent that frames interactive elements distinctly without overpowering.
#A9A9A9169, 169, 1690, 0, 660, 0, 0, 34Utility colors for backgrounds, text, borders, and balance.
RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesBtn Primary Text
#FAFAFA250, 250, 2500, 0, 980, 0, 0, 2RolesText, Btn Secondary Text
#12121218, 18, 180, 0, 70, 0, 0, 93Copy 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-black: #000000;
--color-white: #FFFFFF;
--color-silver: #C0C0C0;
--color-slate-gray: #606060;
--color-dark-silver: #A9A9A9;
--color-cultured-white: #F5F5F5;
--color-snow: #FAFAFA;
--color-eerie-black: #121212;
}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: #000000;
--role-link: #000000;
--role-btn-primary-bg: #000000;
--role-bg-light: #FFFFFF;
--role-headline: #C0C0C0;
--role-btn-secondary-bg: #C0C0C0;
--role-icon: #606060;
--role-border: #606060;
--role-divider: #606060;
--role-outline: #A9A9A9;
--role-btn-outlined-border: #A9A9A9;
--role-btn-outlined-text: #A9A9A9;
--role-bg-dark: #F5F5F5;
--role-btn-primary-text: #FAFAFA;
--role-text: #121212;
--role-btn-secondary-text: #121212;
}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.{
"black": "#000000",
"white": "#FFFFFF",
"silver": "#C0C0C0",
"slate-gray": "#606060",
"dark-silver": "#A9A9A9",
"cultured-white": "#F5F5F5",
"snow": "#FAFAFA",
"eerie-black": "#121212"
}