Back to palettes

Palette

Cybernetic Matrix Blue

A progressive gradient of blues, from deep to electric, representing the glowing interfaces of a complex digital matrix.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cybernetic Matrix Blue 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 Cybernetic Matrix Blue.

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

Data visualization

#0D1C2E#003049#005B85#008BD3#00D0FF

Palette guide

How to use Cybernetic Matrix Blue

Overview

The Cybernetic Matrix Blue palette is a progressive gradient of blues, transitioning from a deep, almost black indigo (#0D1C2E) to a brilliant electric cyan (#00D0FF). With rich intermediate shades like dark navy (#003049), a strong cerulean (#005B85), and a vibrant sky blue (#008BD3), this palette expertly represents the glowing interfaces of a complex digital matrix. Designers and developers will find it ideal for creating immersive, high-tech environments and sophisticated interfaces that convey depth, data flow, and a sense of advanced digital architecture. It's both energetic and profoundly captivating.

Best used for

  • Data visualization dashboards for complex systems
  • Corporate tech branding and sophisticated websites
  • Science fiction UI elements and holographic displays
  • Virtual reality and augmented reality applications
  • Digital security software interfaces and analytics
  • Modern architectural visualizations with a cool, tech feel

Suggested color roles

primary

Use #008BD3 (Vibrant Sky Blue) for main interactive elements, key highlights, or primary branding that needs to be clear and engaging.

secondary

Apply #005B85 (Strong Cerulean) for secondary calls-to-action, section headers, or to provide a deeper blue contrast against lighter elements.

accent

Reserve #00D0FF (Electric Cyan) for subtle glows, hover effects, or small, critical alerts that need to cut through the darker blues.

background

Utilize #0D1C2E (Deep Indigo) as the darkest blue, providing a profound, cool background that allows lighter blues to emerge and glow.

text

Pair #00D0FF (Electric Cyan) or #008BD3 (Vibrant Sky Blue) for headings; use white for general body text on dark backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using adjacent shades like #003049 on #0D1C2E. Prioritize #00D0FF or white on darker blues.
  • Avoid using #0D1C2E and #003049 for critical information if color is the sole differentiator, due to their similar dark values.
  • Use #0D1C2E provides an excellent dark background for lighter blue or white text, ensuring good readability.
  • For color-blind users, avoid relying solely on subtle blue shifts for conveying critical information.

Recommended combinations

Matrix Depths

Create layered backgrounds or subtle depth for complex interfaces, moving from darkest to slightly lighter, muted blues.

#0D1C2E · #003049 · #005B85

Digital Flow

Use for data visualizations, showing a progression from deeper, foundational data to bright, highlighted insights.

#003049 · #008BD3 · #00D0FF

Interface Glow

Ideal for UI elements where #0D1C2E is the background, #008BD3 for main content, and #00D0FF for active states/highlights.

#0D1C2E · #008BD3 · #00D0FF

CSS variables

:root {
  --cybernetic-matrix-blue-1: #0D1C2E;
  --cybernetic-matrix-blue-2: #003049;
  --cybernetic-matrix-blue-3: #005B85;
  --cybernetic-matrix-blue-4: #008BD3;
  --cybernetic-matrix-blue-5: #00D0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cybernetic-matrix-blue": {
        1: "#0D1C2E",
        2: "#003049",
        3: "#005B85",
        4: "#008BD3",
        5: "#00D0FF",
      }
    }
  }
}

Related searches

blue tech gradientfuturistic matrix colorsdark mode blue UIdigital data streamcyber blue interface

Palette colors

Hex values

Color 1#0D1C2E
·
Color 2#003049
·
Color 3#005B85
·
Color 4#008BD3
·
Color 5#00D0FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
2.3:1Fail
4.6:1AA
9.4:1AAA
2
1.2:1Fail
1.9:1Fail
3.7:1AA18
7.5:1AAA
3
2.3:1Fail
1.9:1Fail
2:1Fail
4:1AA18
4
4.6:1AA
3.7:1AA18
2:1Fail
2:1Fail
5
9.4:1AAA
7.5:1AAA
4:1AA18
2:1Fail

Similar palettes

More like Cybernetic Matrix Blue

View all vibrant
Cybernetic Circuit Glow
Cybernetic City Grid
Cybernetic Future Glow
Cybernetic Glow Grid
Cyberpunk Glitch Neon
Digital Circuit Flow