Charcoal Black#0B0F14
Crimson#D13239
Silver#B7BDC7
Slate#5D6876
Steel Blue#8FA3B8
Palette direction

Spacex Inspired Technology Color Palette

This palette channels SpaceX-inspired engineering energy with a high-contrast, mission-ready system built around deep black, launch-oxide red, and metallic silver. The cooler support tones add technical clarity without diluting the bold, aerospace identity.

CustomTechSpaceX-inspiredaerospacetechnologylaunch
palette-preview.example
Tech color direction

Spacex Inspired Technology Color Palette

This palette channels SpaceX-inspired engineering energy with a high-contrast, mission-ready system built around deep black, launch-oxide red, and metallic silver. The cooler support tones add technical clarity without diluting the bold, aerospace identity.

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 Charcoal Black #0B0F1419.2:1 Excellent
Logo Charcoal Black #0B0F14on Silver #B7BDC710.2:1 Excellent
Logo White #FFFFFFon Crimson #D132395.0:1 Strong
Logo Charcoal Black #0B0F14on White #FFFFFF19.2:1 Excellent
Icon color
BackgroundCharcoal Black#0B0F14TextWhite#FFFFFF
Primary Button19.22:1
AAA

Best for the main action users should notice first.

BackgroundCrimson#D13239TextWhite#FFFFFF
Secondary Button4.97:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextSilver#B7BDC7
Outlined Button1.89:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextSilver#B7BDC7
Text Button1.89:1
Low

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

Palette composition8 colorsCustom color relationship
9:41Spacex Inspired Technology Color Palette Color role balance
Custom 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.

CSpacex Inspired Technology Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine SpaceX-style carbon black, launch red, and brushed metallic silver into a sharp, recognizable system. Their contrast creates a disciplined industrial feel that reads as both futuristic and operational.

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.Charcoal Black #0B0F14
HeadlineUsed for main titles and key messages.Crimson #D13239
LinkUsed for links and interactive text.Silver #B7BDC7

Buttons

Primary Button
BackgroundCharcoal Black #0B0F14
TextWhite #FFFFFF
Secondary Button
BackgroundCrimson #D13239
TextWhite #FFFFFF
Outlined Button
BackgroundSilver #B7BDC7
TextSilver #B7BDC7

Interface

TextDefault readable body text.Ebony #111111
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ebony #111111
IconSmall interface icons and marks.Slate #5D6876
BorderCards, inputs, and component borders.Slate #5D6876
DividerSubtle separators between content.Steel Blue #8FA3B8
OutlineFocus rings and emphasis outlines.Steel Blue #8FA3B8

Palette Colors

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

Main (Brand) Colors

The main colors combine SpaceX-style carbon black, launch red, and brushed metallic silver into a sharp, recognizable system. Their contrast creates a disciplined industrial feel that reads as both futuristic and operational.

PrimaryCharcoal Black

RolesLogo, Btn Primary Bg

Charcoal Black gives the system its mission-control seriousness and anchors the brand with a strong aerospace presence.

HEX#0B0F14
RGB11, 15, 20
HSL213, 29, 6
CMYK45, 25, 0, 92
SecondaryCrimson

RolesBtn Secondary Bg, Headline

Crimson supplies the launch-energy accent that feels urgent, engineered, and unmistakably SpaceX-inspired.

HEX#D13239
RGB209, 50, 57
HSL357, 63, 51
CMYK0, 76, 73, 18
TertiarySilver

RolesLink, Btn Outlined Border, Btn Outlined Text

Silver adds a refined technical edge and keeps interactive elements feeling precise rather than decorative.

HEX#B7BDC7
RGB183, 189, 199
HSL218, 13, 75
CMYK8, 5, 0, 22

Support Colors

The support colors extend the palette with cooler aerospace undertones that improve depth, hierarchy, and interface readability. They stay subdued so the red, black, and silver system remains the visual focus.

Slate

RolesIcon, Border

Slate reinforces the engineering mood while providing a restrained mid-tone for interface structure.

HEX#5D6876
RGB93, 104, 118
HSL214, 12, 41
CMYK21, 12, 0, 54
Steel Blue

RolesDivider, Outline

Steel Blue introduces a cool metallic note that balances the warmth of Crimson without competing with the main colors.

HEX#8FA3B8
RGB143, 163, 184
HSL211, 22, 64
CMYK22, 11, 0, 28

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#F2F4F7
RGB242, 244, 247
HSL216, 24, 96
CMYK2, 1, 0, 3
Ebony

RolesBg Dark, Text

HEX#111111
RGB17, 17, 17
HSL0, 0, 7
CMYK0, 0, 0, 93

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-charcoal-black: #0B0F14;
  --color-crimson: #D13239;
  --color-silver: #B7BDC7;
  --color-slate: #5D6876;
  --color-steel-blue: #8FA3B8;
  --color-white: #FFFFFF;
  --color-ivory: #F2F4F7;
  --color-ebony: #111111;
}

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: #0B0F14;
  --role-btn-primary-bg: #0B0F14;
  --role-btn-secondary-bg: #D13239;
  --role-headline: #D13239;
  --role-link: #B7BDC7;
  --role-btn-outlined-border: #B7BDC7;
  --role-btn-outlined-text: #B7BDC7;
  --role-icon: #5D6876;
  --role-border: #5D6876;
  --role-divider: #8FA3B8;
  --role-outline: #8FA3B8;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #111111;
  --role-text: #111111;
}

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.
{
    "charcoal-black": "#0B0F14",
    "crimson": "#D13239",
    "silver": "#B7BDC7",
    "slate": "#5D6876",
    "steel-blue": "#8FA3B8",
    "white": "#FFFFFF",
    "ivory": "#F2F4F7",
    "ebony": "#111111"
}
Press Space to load new palette