Royal Blue#2F3CE9
Electric Purple#8A2BE2
Flame Orange#F9731B
Dusky Indigo#423075
Slate Blue#3A4B9A
Palette direction

Iridescent Luminous Futuristic Color Palette

This palette draws inspiration from the vibrant, iridescent colors reflected on a glossy, abstract form against a dark background, creating a dynamic and futuristic look. The main colors capture the luminous blues, purples, and fiery oranges, providing a strong visual identity, while the support colors soften and balance the palette with subtler variations. Neutral colors anchor the overall system for readability and versatility.

ComplementaryCreativeiridescentluminousfuturisticvibrant
palette-preview.example
Creative color direction

Iridescent Luminous Futuristic Color Palette

This palette draws inspiration from the vibrant, iridescent colors reflected on a glossy, abstract form against a dark background, creating a dynamic and futuristic look. The main colors capture the luminous blues, purples, and fiery oranges, providing a strong visual identity, while the support colors soften and balance the palette with subtler variations. Neutral colors anchor the overall system for readability and versatility.

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 Royal Blue #2F3CE97.1:1 Excellent
Logo Charcoal #1A1A1Aon Flame Orange #F9731B6.2:1 Strong
Logo Pure White #FFFFFFon Electric Purple #8A2BE26.0:1 Strong
Logo Charcoal #1A1A1Aon Pure White #FFFFFF17.4:1 Excellent
Icon color
BackgroundRoyal Blue#2F3CE9TextPure White#FFFFFF
Primary Button7.13:1
AAA

Best for the main action users should notice first.

BackgroundElectric Purple#8A2BE2TextPure White#FFFFFF
Secondary Button5.96:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextRoyal Blue#2F3CE9
Outlined Button7.13:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextRoyal Blue#2F3CE9
Text Button7.13:1
AAA

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

Palette composition8 colorsComplementary color relationship
9:41Iridescent Luminous Futuristic Color Palette Color role balance
Complementary 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.

CIridescent Luminous Futuristic Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine luminous blue and purple hues with a contrasting fiery orange to create a visually striking and balanced system that radiates energy and sophistication.

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.Royal Blue #2F3CE9
HeadlineUsed for main titles and key messages.Electric Purple #8A2BE2
LinkUsed for links and interactive text.Royal Blue #2F3CE9

Buttons

Primary Button
BackgroundRoyal Blue #2F3CE9
TextPure White #FFFFFF
Secondary Button
BackgroundElectric Purple #8A2BE2
TextPure White #FFFFFF
Outlined Button
BackgroundRoyal Blue #2F3CE9
TextRoyal Blue #2F3CE9

Interface

TextDefault readable body text.Charcoal #1A1A1A
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Alabaster #F4F4F4
IconSmall interface icons and marks.Dusky Indigo #423075
BorderCards, inputs, and component borders.Dusky Indigo #423075
DividerSubtle separators between content.Dusky Indigo #423075
OutlineFocus rings and emphasis outlines.Dusky Indigo #423075

Palette Colors

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

Main (Brand) Colors

The main colors combine luminous blue and purple hues with a contrasting fiery orange to create a visually striking and balanced system that radiates energy and sophistication.

PrimaryRoyal Blue

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Royal Blue conveys a sense of trust, innovation, and vibrancy, forming the foundation of the palette's luminous quality.

HEX#2F3CE9
RGB47, 60, 233
HSL236, 81, 55
CMYK80, 74, 0, 9
SecondaryElectric Purple

RolesBtn Secondary Bg, Headline

Electric Purple evokes creativity and modernity, complementing blue with its rich, energetic hue.

HEX#8A2BE2
RGB138, 43, 226
HSL271, 76, 53
CMYK39, 81, 0, 11
TertiaryFlame Orange

Flame Orange adds warmth and excitement, providing a vivid contrast to the cooler tones and energizing the palette.

HEX#F9731B
RGB249, 115, 27
HSL24, 95, 54
CMYK0, 54, 89, 2

Support Colors

Support colors extend the main palette with cooler, darker hues that balance the intensity while maintaining coherence with subtle iridescent undertones.

Dusky Indigo

RolesIcon, Border, Divider, Outline

Dusky Indigo complements the main purples with a softer, muted shade that anchors elements like borders and icons without overpowering.

HEX#423075
RGB66, 48, 117
HSL256, 42, 32
CMYK44, 59, 0, 54
Slate Blue

Slate Blue reinforces the blue spectrum with a calm and grounding tone ideal for supporting interface elements.

HEX#3A4B9A
RGB58, 75, 154
HSL229, 45, 42
CMYK62, 51, 0, 40

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

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

RolesBg Dark

HEX#F4F4F4
RGB244, 244, 244
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

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-royal-blue: #2F3CE9;
  --color-electric-purple: #8A2BE2;
  --color-flame-orange: #F9731B;
  --color-dusky-indigo: #423075;
  --color-slate-blue: #3A4B9A;
  --color-pure-white: #FFFFFF;
  --color-alabaster: #F4F4F4;
  --color-charcoal: #1A1A1A;
}

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: #2F3CE9;
  --role-link: #2F3CE9;
  --role-btn-primary-bg: #2F3CE9;
  --role-btn-outlined-border: #2F3CE9;
  --role-btn-outlined-text: #2F3CE9;
  --role-btn-secondary-bg: #8A2BE2;
  --role-headline: #8A2BE2;
  --role-icon: #423075;
  --role-border: #423075;
  --role-divider: #423075;
  --role-outline: #423075;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F4F4F4;
  --role-text: #1A1A1A;
}

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.
{
    "royal-blue": "#2F3CE9",
    "electric-purple": "#8A2BE2",
    "flame-orange": "#F9731B",
    "dusky-indigo": "#423075",
    "slate-blue": "#3A4B9A",
    "pure-white": "#FFFFFF",
    "alabaster": "#F4F4F4",
    "charcoal": "#1A1A1A"
}
Press Space to load new palette