Palette

Sci-Fi Interface Glow

Crisp, glowing blues and teals, like the light from an advanced science fiction user interface.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sci-Fi Interface Glow 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 Sci-Fi Interface Glow.

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

Data visualization

#0A1931#185E8A#3B92A7#5DE0E6#C7F7FA

Palette guide

How to use Sci-Fi Interface Glow

Overview

The "Sci-Fi Interface Glow" palette offers a sophisticated, futuristic aesthetic, ideal for digital experiences. Dominated by deep blues and vibrant teals, it evokes the crisp, luminous feel of advanced technology. With a dark foundation like #0A1931, designers can build dynamic interfaces that pop. The mid-tones, such as #185E8A and #3B92A7, provide depth and structure, while the brilliant #5DE0E6 and ethereal #C7F7FA serve as perfect accents for glowing elements, interactive states, and data visualizations. This palette ensures a clean, high-tech appearance, perfect for conveying innovation and precision in UI/UX design.

Best used for

Futuristic UI/UX design
Technology brand identity
Data visualization dashboards
Gaming interfaces (sci-fi themes)
Clean, minimalist website design
Digital product presentations

Suggested color roles

primary

#185E8A. A stable, deep blue for main navigation, primary buttons, or core informational panels, providing a strong base without being overly dark.

secondary

#3B92A7. Use for secondary actions, subheadings, or active states to add a distinct, slightly brighter contrast against the primary blue.

accent

#5DE0E6. The luminous glow for interactive elements, progress indicators, highlights, or key data points that require immediate attention.

background

#0A1931. The foundational deep space blue, ideal for dark mode interfaces, full-bleed backgrounds, or large content containers, enhancing the glow of lighter elements.

text

#C7F7FA. Optimal for primary text on dark backgrounds like #0A1931, ensuring high readability and a bright, clean digital aesthetic. Alternatively, use #5DE0E6 for headings or prominent text.

Accessibility notes

Ensure sufficient contrast between #C7F7FA or #5DE0E6 and the dark backgrounds like #0A1931 for WCAG AA compliance, especially for body text.
Avoid using #185E8A or #3B92A7 for small body text on #0A1931 as contrast may be insufficient for some users.
When using #5DE0E6 as an accent, pair it with a darker background like #0A1931 or #185E8A to maximize its luminous effect and ensure visibility.
Use a tool to check the contrast ratio of all text and interactive element combinations, particularly for smaller font sizes, to guarantee readability.

Recommended combinations

Dark UI Base

Ideal for core interface screens, using #0A1931 as the background, #C7F7FA for primary text and icons, and #5DE0E6 for interactive states or glowing indicators.

#0A1931 · #C7F7FA · #5DE0E6

Data Visualization

Excellent for charts and graphs, with #185E8A as a base, #3B92A7 for data series, and #5DE0E6 for highlights or active data points, providing clear distinction.

#185E8A · #3B92A7 · #5DE0E6

Highlighted Element

Use #0A1931 for the overall container, #185E8A for a card or panel, and #3B92A7 for a heading or border to create depth and focus on specific UI components.

#0A1931 · #185E8A · #3B92A7

CSS variables

:root {
  --sci-fi-interface-glow-1: #0A1931;
  --sci-fi-interface-glow-2: #185E8A;
  --sci-fi-interface-glow-3: #3B92A7;
  --sci-fi-interface-glow-4: #5DE0E6;
  --sci-fi-interface-glow-5: #C7F7FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sci-fi-interface-glow": {
        1: "#0A1931",
        2: "#185E8A",
        3: "#3B92A7",
        4: "#5DE0E6",
        5: "#C7F7FA",
      }
    }
  }
}

Hex values

Color 1#0A1931

Color 2#185E8A

Color 3#3B92A7

Color 4#5DE0E6

Color 5#C7F7FA

Accessibility

Contrast checker

2.5:1Fail

4.9:1AA

11.1:1AAA

15.1:1AAA

2.5:1Fail

1.9:1Fail

4.4:1AA18

6:1AA

4.9:1AA

1.9:1Fail

2.3:1Fail

3.1:1AA18

11.1:1AAA

4.4:1AA18

2.3:1Fail

1.4:1Fail

15.1:1AAA

6:1AA

3.1:1AA18

1.4:1Fail

Similar palettes

More like Sci-Fi Interface Glow

View all cool

Sci-Fi Interface Blue