Palette

Sci-Fi Hologram

A futuristic palette evoking glowing data projections and high-tech interfaces in a sleek, digital world.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00C7FF#9C27B0#39FF14#2C3E50#E0F7FA

Palette guide

How to use Sci-Fi Hologram

Overview

The "Sci-Fi Hologram" palette is a dynamic collection designed for futuristic digital experiences. Anchored by the vibrant electric blue #00C7FF, it evokes glowing data projections and advanced interfaces. Complementary hues include the deep, mysterious purple #9C27B0, perfect for secondary elements, and the striking neon green #39FF14 that demands attention as a highlight. A solid foundation is provided by the dark blue-gray #2C3E50, offering a sleek backdrop for these luminous colors. The nearly white #E0F7FA ensures readability and provides clean contrast. This palette is ideal for creating immersive, high-tech environments in applications, games, or branding, offering a modern, energetic, and cybernetic aesthetic that truly stands out.

Best used for

UI/UX design for tech startups and software applications
Sci-fi themed video games and virtual reality experiences
Branding for cybersecurity firms or AI companies
Event design for technology conferences or expos
Motion graphics and animated digital displays
Futuristic website designs with a modern aesthetic

Suggested color roles

primary

Use #00C7FF as the dominant interactive color for buttons, navigation, and key informational displays, establishing a futuristic brand presence.

secondary

Apply #9C27B0 for secondary actions, sub-headings, or to differentiate sections in complex data visualizations, offering a subtle depth.

accent

Reserve #39FF14 for high-impact alerts, active states, loading indicators, or small but critical UI elements that require immediate attention.

background

Utilize #2C3E50 as the primary dark canvas for interfaces and digital environments, providing a sleek, deep foundation that makes the vibrant colors pop.

text

Employ #E0F7FA for primary body text and labels against the dark #2C3E50 background to ensure readability, or a pure white for maximum contrast on critical text.

Accessibility notes

Ensure sufficient contrast when pairing #00C7FF, #9C27B0, or #39FF14 with #E0F7FA for text, as the luminosity difference might be borderline.
Prioritize using #E0F7FA or pure white for body text against the dark #2C3E50 background to meet WCAG AA requirements for readability.
Use the vibrant accent colors like #39FF14 sparingly for critical information, ensuring they don't cause visual fatigue or overwhelm users with photosensitivity.
Avoid using #9C27B0 as primary text color on dark backgrounds if possible, as its mid-tone value can reduce legibility for longer passages.

Recommended combinations

Cyber Interface

Ideal for core UI elements in dashboards, data displays, or gaming HUDs, with clear interactive components and striking alerts.

#2C3E50 · #00C7FF · #39FF14

Galactic Depth

Perfect for backgrounds with secondary information panels and readable text, creating a sophisticated, deep space feel in applications or websites.

#2C3E50 · #9C27B0 · #E0F7FA

Neon Alert

Suitable for call-to-action sections, important announcements, or interactive elements requiring high visibility against a lighter context.

#E0F7FA · #00C7FF · #39FF14

CSS variables

:root {
  --sci-fi-hologram-1: #00C7FF;
  --sci-fi-hologram-2: #9C27B0;
  --sci-fi-hologram-3: #39FF14;
  --sci-fi-hologram-4: #2C3E50;
  --sci-fi-hologram-5: #E0F7FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sci-fi-hologram": {
        1: "#00C7FF",
        2: "#9C27B0",
        3: "#39FF14",
        4: "#2C3E50",
        5: "#E0F7FA",
      }
    }
  }
}

Hex values

Color 1#00C7FF

Color 2#9C27B0

Color 3#39FF14

Color 4#2C3E50

Color 5#E0F7FA

Accessibility

Contrast checker

3.2:1AA18

1.5:1Fail

5.6:1AA

1.8:1Fail

3.2:1AA18

4.7:1AA

1.7:1Fail

5.7:1AA

1.5:1Fail

4.7:1AA

8.1:1AAA

1.2:1Fail

5.6:1AA

1.7:1Fail

8.1:1AAA

9.9:1AAA

1.8:1Fail

5.7:1AA

1.2:1Fail

9.9:1AAA

Similar palettes

More like Sci-Fi Hologram

View all vibrant

Cybernetic Circuit Glow

Cyber Grid Flash

Cybernetic City Pulse

Cybernetic Future Glow

Cyberpunk Glitch Neon

Electric Circuit Board