DJI Signature Blue#00A0E9
Aerial Cyan#22B8F0
Graphite Signal#0F172A
Sky Steel#5B7C99
Mist Aero#8FB7C9
Palette direction

Dji Inspired Tech Color Palette

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.

AnalogousTechdji inspireddrone technologyaerial imagingprecision engineering
palette-preview.example
Tech color direction

Dji Inspired Tech Color Palette

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 system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Pure White #FFFFFFon Graphite Signal #0F172A17.9:1 Excellent
Logo Graphite Signal #0F172Aon Aerial Cyan #22B8F07.8:1 Excellent
Logo Graphite Signal #0F172Aon DJI Signature Blue #00A0E96.1:1 Strong
Logo Graphite Signal #0F172Aon Pure White #FFFFFF17.9:1 Excellent
Icon color
BackgroundDJI Signature Blue#00A0E9TextDeep Slate#111827
Primary Button6.09:1
AA

Best for the main action users should notice first.

BackgroundAerial Cyan#22B8F0TextDeep Slate#111827
Secondary Button7.76:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextMist Aero#8FB7C9
Outlined Button2.15:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextAerial Cyan#22B8F0
Text Button2.29:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsAnalogous color relationship
9:41Dji Inspired Tech Color Palette Color role balance
Analogous system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CDji Inspired Tech Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color 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.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.DJI Signature Blue #00A0E9
HeadlineUsed for main titles and key messages.DJI Signature Blue #00A0E9
LinkUsed for links and interactive text.Aerial Cyan #22B8F0

Buttons

Primary Button
BackgroundDJI Signature Blue #00A0E9
TextDeep Slate #111827
Secondary Button
BackgroundAerial Cyan #22B8F0
TextDeep Slate #111827
Outlined Button
BackgroundSky Steel #5B7C99
TextMist Aero #8FB7C9

Interface

TextDefault readable body text.Deep Slate #111827
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Cloud White #F5F7FA
IconSmall interface icons and marks.Sky Steel #5B7C99
BorderCards, inputs, and component borders.Mist Aero #8FB7C9
DividerSubtle separators between content.Deep Slate #111827
OutlineFocus rings and emphasis outlines.Deep Slate #111827

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

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.

PrimaryDJI Signature Blue

RolesLogo, Btn Primary Bg, Headline

The brand’s signature blue delivers immediate recognition and a confident, high-tech presence.

HEX#00A0E9
RGB0, 160, 233
HSL199, 100, 46
CMYK100, 31, 0, 9
SecondaryAerial Cyan

RolesLink, Btn Secondary Bg

A lighter cyan-blue adds motion and interaction energy without breaking the DJI-like visual language.

HEX#22B8F0
RGB34, 184, 240
HSL196, 87, 54
CMYK86, 23, 0, 6
TertiaryGraphite Signal

A deep blue-black anchors the system and keeps the interface feeling engineered and precise.

HEX#0F172A
RGB15, 23, 42
HSL222, 47, 11
CMYK64, 45, 0, 84

Support Colors

The 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,

Sky Steel

RolesBtn Outlined Border, Icon

A muted steel-blue softens outlines and icons while staying aligned with the main palette.

HEX#5B7C99
RGB91, 124, 153
HSL208, 25, 48
CMYK41, 19, 0, 40
Mist Aero

RolesBtn Outlined Text, Border

A pale aero tint balances outlined UI elements and light borders with a restrained technical feel.

HEX#8FB7C9
RGB143, 183, 201
HSL199, 35, 67
CMYK29, 9, 0, 21

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Cloud White

RolesBg Dark

HEX#F5F7FA
RGB245, 247, 250
HSL216, 33, 97
CMYK2, 1, 0, 2
Deep Slate

RolesDivider, Outline, Text, Btn Primary Text, Btn Secondary Text

HEX#111827
RGB17, 24, 39
HSL221, 39, 11
CMYK56, 38, 0, 85

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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;
}

Role tokens

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;
}

JSON

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"
}
Press Space to load new palette