This palette pairs high-contrast black and white with a sharp electric blue to echo a futuristic, high-performance brand system. The result feels bold, technical, and instantly recognizable without relying on extra hues.
This palette pairs high-contrast black and white with a sharp electric blue to echo a futuristic, high-performance brand system. The result feels bold, technical, and instantly recognizable without relying on extra hues.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette works by combining a stark black-and-white core with an electric blue accent that signals speed, ambition, and technological confidence. This creates a clean system that feels engineered and memorable rather than decorative.
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 palette works by combining a stark black-and-white core with an electric blue accent that signals speed, ambition, and technological confidence. This creates a clean system that feels engineered and memorable rather than decorative.
RolesBtn Primary Bg, Headline, Btn Outlined Border, Logo
Black gives the brand a commanding, aerospace-like weight and makes the palette feel precise and high stakes.
#0000000, 0, 00, 0, 00, 0, 0, 100RolesLink, Btn Secondary Bg, Btn Outlined Text
Cobalt Blue adds the signature energetic signal that keeps the system futuristic and digitally active.
#1D4ED829, 78, 216224, 76, 4887, 64, 0, 15RolesBg Light
White keeps the interface open and crisp while delivering the strongest possible contrast on the dark button treatments.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0These accents extend the main palette with restrained utility tones that support interfaces without competing with the core black, white, and blue structure.
RolesIcon, Outline
Sky Blue softens the system for icons and outlines while staying visually tied to the core blue.
#3B82F659, 130, 246217, 91, 6076, 47, 0, 4RolesBorder, Divider
Slate adds a cool technical neutral that organizes layouts without pulling attention away from the primary colors.
#94A3B8148, 163, 184215, 20, 6520, 11, 0, 28Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F8FAFC248, 250, 252210, 40, 982, 1, 0, 1RolesBg Dark, Text
#0F172A15, 23, 42222, 47, 1164, 45, 0, 84Copy 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-cobalt-blue: #1D4ED8;
--color-white: #FFFFFF;
--color-sky-blue: #3B82F6;
--color-slate: #94A3B8;
--color-snow: #F8FAFC;
--color-midnight: #0F172A;
}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-btn-primary-bg: #000000;
--role-headline: #000000;
--role-btn-outlined-border: #000000;
--role-logo: #000000;
--role-link: #1D4ED8;
--role-btn-secondary-bg: #1D4ED8;
--role-btn-outlined-text: #1D4ED8;
--role-bg-light: #FFFFFF;
--role-icon: #3B82F6;
--role-outline: #3B82F6;
--role-border: #94A3B8;
--role-divider: #94A3B8;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #0F172A;
--role-text: #0F172A;
}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",
"cobalt-blue": "#1D4ED8",
"white": "#FFFFFF",
"sky-blue": "#3B82F6",
"slate": "#94A3B8",
"snow": "#F8FAFC",
"midnight": "#0F172A"
}