Palette

Cyber City Dream

A futuristic urban nightscape bathed in deep blues and purples, evoking digital mystery and dream.

darkminimal5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyber City Dream reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Cyber City Dream.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#000080#4B0082#800080#8A2BE2#1E90FF

Palette guide

How to use Cyber City Dream

Overview

The Cyber City Dream palette immerses designs in a mysterious, futuristic nightscape with its deep blues and purples. From the stark #000080 to the vibrant #1E90FF, and the enigmatic #4B0082, this palette is ideal for evoking digital mystery. #800080 provides a rich, royal purple, while #8A2BE2 offers a compelling accent. Designers can harness these hex codes to create sleek, sophisticated interfaces, dark mode themes, or captivating visuals that hint at advanced technology and ethereal digital worlds. Developers will appreciate the strong contrast possibilities for legible text and striking graphic elements.

Best used for

Dark mode UI/UX designs
Sci-fi game aesthetics and character design
Futuristic web backgrounds and headers
Mysterious or fantasy-themed digital art
Event branding for tech conferences or concerts
Abstract data visualization with a deep feel

Suggested color roles

primary

#4B0082 - A deep, rich indigo-purple, excellent for foundational elements and substantial content blocks.

secondary

#8A2BE2 - A vibrant blue-violet, perfect for accentuating important information, interactive states, or decorative lines.

accent

#1E90FF - A bright, electric blue that provides a sharp, energetic contrast for highlights or calls-to-action.

background

#000080 - A very dark navy, creating an immersive and deep canvas suitable for a 'night mode' experience.

text

#1E90FF - Use this bright blue for headings and key information against dark backgrounds; for body text, consider a very light grey or white for readability.

Accessibility notes

Ensure high contrast for text, especially when using lighter colors like #1E90FF against very dark backgrounds like #000080.
Avoid using #4B0082 and #800080 for small text side-by-side due to similar luminance.
Dark palette requires careful text color selection; pure white or light grey often works best for body copy.
Test color pairings for legibility, especially for users with color vision deficiencies, as blue-purple hues can sometimes be tricky.

Recommended combinations

Deep Cyber

A powerful dark theme base with #1E90FF providing bright, electric accents or highlights.

#000080 · #4B0082 · #1E90FF

Mystic Glitch

Layered backgrounds or graphic elements where the purples blend, with #000080 for depth.

#800080 · #8A2BE2 · #000080

Future Pulse

Vibrant interactive elements, progress bars, or striking visual gradients that demand attention.

#1E90FF · #8A2BE2 · #4B0082

CSS variables

:root {
  --cyber-city-dream-1: #000080;
  --cyber-city-dream-2: #4B0082;
  --cyber-city-dream-3: #800080;
  --cyber-city-dream-4: #8A2BE2;
  --cyber-city-dream-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyber-city-dream": {
        1: "#000080",
        2: "#4B0082",
        3: "#800080",
        4: "#8A2BE2",
        5: "#1E90FF",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#4B0082

Color 3#800080

Color 4#8A2BE2

Color 5#1E90FF

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.7:1Fail

4.9:1AA

1.2:1Fail

1.4:1Fail

2.2:1Fail

4:1AA18

1.7:1Fail

1.4:1Fail

1.6:1Fail

2.9:1Fail

2.7:1Fail

2.2:1Fail

1.6:1Fail

1.8:1Fail

4.9:1AA

4:1AA18

2.9:1Fail

1.8:1Fail

Similar palettes

More like Cyber City Dream

View all dark

Deep Space

Anthracite Edge

Brutalist Concrete Form

Cosmic Dust

Espresso Roast Foam

Ethereal Night Bloom