A DJI-inspired system built around the brand’s signature electric blue, paired with a cool aviation cyan and a grounded graphite accent for a precise, technical feel. The palette keeps the interface crisp and high-performance while preserving the strong digital recognition associated with the brand.
A DJI-inspired system built around the brand’s signature electric blue, paired with a cool aviation cyan and a grounded graphite accent for a precise, technical feel. The palette keeps the interface crisp and high-performance while preserving the strong digital recognition associated with the brand.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a tight blue-cyan family, echoing DJI’s recognizable digital presence while keeping the system sharp and engineered. This creates a coherent brand signal that feels fast, capable, and product-focused.
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 tight blue-cyan family, echoing DJI’s recognizable digital presence while keeping the system sharp and engineered. This creates a coherent brand signal that feels fast, capable, and product-focused.
RolesLogo, Btn Primary Bg, Headline
The brand’s signature blue delivers immediate recognition and a confident, high-tech presence.
#00A0E90, 160, 233199, 100, 46100, 31, 0, 9RolesLink, Btn Secondary Bg
A lighter cyan-blue adds motion and interaction energy without breaking the DJI-like visual language.
#22B8F034, 184, 240196, 87, 5486, 23, 0, 6A deep blue-black anchors the system and keeps the interface feeling engineered and precise.
#0F172A15, 23, 42222, 47, 1164, 45, 0, 84The support accents extend the core blue system with quieter atmospheric and structural tones, adding usability without competing with the signature brand blue. They help separate,
RolesBtn Outlined Border, Icon
A muted steel-blue softens outlines and icons while staying aligned with the main palette.
#5B7C9991, 124, 153208, 25, 4841, 19, 0, 40RolesBtn Outlined Text, Border
A pale aero tint balances outlined UI elements and light borders with a restrained technical feel.
#8FB7C9143, 183, 201199, 35, 6729, 9, 0, 21Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesDivider, Outline, Text, Btn Primary Text, Btn Secondary Text
#11182717, 24, 39221, 39, 1156, 38, 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-dji-signature-blue: #00A0E9;
--color-aerial-cyan: #22B8F0;
--color-graphite-signal: #0F172A;
--color-sky-steel: #5B7C99;
--color-mist-aero: #8FB7C9;
--color-pure-white: #FFFFFF;
--color-cloud-white: #F5F7FA;
--color-deep-slate: #111827;
}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: #00A0E9;
--role-btn-primary-bg: #00A0E9;
--role-headline: #00A0E9;
--role-link: #22B8F0;
--role-btn-secondary-bg: #22B8F0;
--role-btn-outlined-border: #5B7C99;
--role-icon: #5B7C99;
--role-btn-outlined-text: #8FB7C9;
--role-border: #8FB7C9;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F5F7FA;
--role-divider: #111827;
--role-outline: #111827;
--role-text: #111827;
--role-btn-primary-text: #111827;
--role-btn-secondary-text: #111827;
}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.{
"dji-signature-blue": "#00A0E9",
"aerial-cyan": "#22B8F0",
"graphite-signal": "#0F172A",
"sky-steel": "#5B7C99",
"mist-aero": "#8FB7C9",
"pure-white": "#FFFFFF",
"cloud-white": "#F5F7FA",
"deep-slate": "#111827"
}