Midnight Navy#0B1F3A
Nebula Violet#6A35C8
Starlight Cyan#2CC9D7
Astral Slate#7B8EA8
Moonstone Blue#9FB7C9
Palette direction

Cosmic Space Tech Color Palette

This space-inspired palette pairs deep cosmic blue with a vivid nebula violet and a bright starlight cyan for a recognizable, futuristic system. The accents stay restrained and luminous, so the brand feels expansive and high-tech without losing clarity in interfaces.

AnalogousTechspace inspiredcosmicnebulastarlight
palette-preview.example
Tech color direction

Cosmic Space Tech Color Palette

This space-inspired palette pairs deep cosmic blue with a vivid nebula violet and a bright starlight cyan for a recognizable, futuristic system. The accents stay restrained and luminous, so the brand feels expansive and high-tech without losing clarity in interfaces.

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 White #FFFFFFon Midnight Navy #0B1F3A16.5:1 Excellent
Logo Charcoal #111827on Starlight Cyan #2CC9D78.8:1 Excellent
Logo Charcoal #111827on White #FFFFFF17.7:1 Excellent
Logo Charcoal #111827on Moonstone Blue #9FB7C98.5:1 Excellent
Icon color
BackgroundNebula Violet#6A35C8TextWhite#FFFFFF
Primary Button7.10:1
AAA

Best for the main action users should notice first.

BackgroundStarlight Cyan#2CC9D7TextCharcoal#111827
Secondary Button8.82:1
AAA

Useful for softer choices and secondary paths.

BackgroundIvory#F4F7FBTextNebula Violet#6A35C8
Outlined Button6.61:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#F4F7FBTextStarlight Cyan#2CC9D7
Text Button1.87:1
Low

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

Palette composition8 colorsAnalogous color relationship
9:41Cosmic Space 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.

CCosmic Space Tech Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a vivid triadic relationship that echoes the variety of a night sky, with one grounded depth tone and two luminous celestial accents. Together they create a memorable space system that feels modern, energetic, and visually balanced.

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.Midnight Navy #0B1F3A
HeadlineUsed for main titles and key messages.Nebula Violet #6A35C8
LinkUsed for links and interactive text.Starlight Cyan #2CC9D7

Buttons

Primary Button
BackgroundNebula Violet #6A35C8
TextWhite #FFFFFF
Secondary Button
BackgroundStarlight Cyan #2CC9D7
TextCharcoal #111827
Outlined Button
BackgroundNebula Violet #6A35C8
TextNebula Violet #6A35C8

Interface

TextDefault readable body text.Charcoal #111827
Bg LightLight page or section background.Ivory #F4F7FB
Bg DarkDark page or section background.Midnight Navy #0B1F3A
IconSmall interface icons and marks.Astral Slate #7B8EA8
BorderCards, inputs, and component borders.Astral Slate #7B8EA8
DividerSubtle separators between content.Moonstone Blue #9FB7C9
OutlineFocus rings and emphasis outlines.Moonstone Blue #9FB7C9

Palette Colors

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

Main (Brand) Colors

The main colors form a vivid triadic relationship that echoes the variety of a night sky, with one grounded depth tone and two luminous celestial accents. Together they create a memorable space system that feels modern, energetic, and visually balanced.

PrimaryMidnight Navy

RolesLogo, Bg Dark

Midnight Navy gives the palette a deep space foundation that feels stable, premium, and vast.

HEX#0B1F3A
RGB11, 31, 58
HSL214, 68, 14
CMYK81, 47, 0, 77
PrimaryNebula Violet

RolesBtn Primary Bg, Headline, Btn Outlined Border, Btn Outlined Text

Nebula Violet adds a cosmic glow that makes key brand moments feel imaginative and distinctive.

HEX#6A35C8
RGB106, 53, 200
HSL262, 58, 50
CMYK47, 74, 0, 22
SecondaryStarlight Cyan

RolesLink, Btn Secondary Bg

Starlight Cyan introduces a bright orbital accent that improves clarity and signals motion or interaction.

HEX#2CC9D7
RGB44, 201, 215
HSL185, 68, 51
CMYK80, 7, 0, 16

Support Colors

The support colors soften the celestial scheme and add controlled depth without competing with the main trio. They extend the palette with cooler atmospheric notes that work well for subtle emphasis and UI structure.

Astral Slate

RolesIcon, Border

Astral Slate supports the primary colors with a calm technical tone that keeps interface elements readable.

HEX#7B8EA8
RGB123, 142, 168
HSL215, 21, 57
CMYK27, 15, 0, 34
Moonstone Blue

RolesDivider, Outline

Moonstone Blue bridges the dark main color and the lighter neutrals, giving structure with a quiet luminous edge.

HEX#9FB7C9
RGB159, 183, 201
HSL206, 28, 71
CMYK21, 9, 0, 21

Neutral Colors

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

White

RolesBtn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Light

HEX#F4F7FB
RGB244, 247, 251
HSL214, 47, 97
CMYK3, 2, 0, 2
Charcoal

RolesText, 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-midnight-navy: #0B1F3A;
  --color-nebula-violet: #6A35C8;
  --color-starlight-cyan: #2CC9D7;
  --color-astral-slate: #7B8EA8;
  --color-moonstone-blue: #9FB7C9;
  --color-white: #FFFFFF;
  --color-ivory: #F4F7FB;
  --color-charcoal: #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: #0B1F3A;
  --role-bg-dark: #0B1F3A;
  --role-btn-primary-bg: #6A35C8;
  --role-headline: #6A35C8;
  --role-btn-outlined-border: #6A35C8;
  --role-btn-outlined-text: #6A35C8;
  --role-link: #2CC9D7;
  --role-btn-secondary-bg: #2CC9D7;
  --role-icon: #7B8EA8;
  --role-border: #7B8EA8;
  --role-divider: #9FB7C9;
  --role-outline: #9FB7C9;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-light: #F4F7FB;
  --role-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.
{
    "midnight-navy": "#0B1F3A",
    "nebula-violet": "#6A35C8",
    "starlight-cyan": "#2CC9D7",
    "astral-slate": "#7B8EA8",
    "moonstone-blue": "#9FB7C9",
    "white": "#FFFFFF",
    "ivory": "#F4F7FB",
    "charcoal": "#111827"
}
Press Space to load new palette