Palette

Galactic Ice Drift

Deep, ethereal blues and cool greys, like ice formations drifting through the silent expanse of space.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Galactic Ice Drift 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 Galactic Ice Drift.

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

Data visualization

#0D1C2A#1F364E#3D5A7B#6D8DB1#9EC8D9

Palette guide

How to use Galactic Ice Drift

Overview

The Galactic Ice Drift palette evokes a serene, expansive feel with its cool, deep blues and icy tones. Anchored by the profound #0D1C2A, it transitions through the sophisticated #1F364E and the balanced #3D5A7B, culminating in the lighter, ethereal #6D8DB1 and #9EC8D9. This palette is ideal for creating interfaces that require a sense of calm, professionalism, or futuristic elegance. Designers can leverage its inherent depth for impactful visual hierarchy, while developers will find its cohesive range simplifies consistent theming across various UI components. From dark mode applications to branding that speaks of stability and innovation, Galactic Ice Drift offers a versatile foundation for cool-toned design.

Best used for

Dark mode UI themes and applications
Technology and software branding
Science fiction or space-themed content
Professional corporate websites and presentations
Calm and meditative application interfaces
Luxury product packaging with a cool aesthetic

Suggested color roles

primary

Use #0D1C2A as a dominant background or primary branding color to establish a profound, sophisticated base. It provides excellent contrast for lighter elements.

secondary

#1F364E serves well for secondary backgrounds, panel headers, or prominent UI elements, offering a subtle differentiation from the primary dark tone while maintaining depth.

accent

Apply #3D5A7B for interactive components like buttons, links, or progress bars. It offers sufficient visibility against darker backgrounds without being overly bright.

background

The deepest hue, #0D1C2A, is perfect for large background areas, creating a vast, immersive feel. For lighter sections, #1F364E can also function as a secondary background.

text

For optimal readability against #0D1C2A or #1F364E, use pure white or a very light gray. For secondary text or subtle highlights on mid-tones, #6D8DB1 can provide a soft, legible option.

Accessibility notes

Ensure sufficient contrast when pairing lighter shades like #9EC8D9 or #6D8DB1 with #3D5A7B for text.
Always use pure white or a very light gray for body text on #0D1C2A and #1F364E backgrounds to meet WCAG AA standards.
Avoid using #3D5A7B text on #1F364E backgrounds, as contrast may be insufficient for readability.
Test button states and interactive elements using #3D5A7B as an accent to ensure clear visual feedback for users.

Recommended combinations

Serene Depth

Ideal for dark mode interfaces, brand logos, or large headers where deep background contrast is desired with bright text.

#0D1C2A · #1F364E · #9EC8D9

Icy Accents

Great for card backgrounds, secondary navigation, or data visualizations, providing a layered cool aesthetic.

#1F364E · #3D5A7B · #6D8DB1

Subtle Gradient

Excellent for subtle gradients, hover states, or progress indicators, offering a gentle transition of cool tones.

#3D5A7B · #6D8DB1 · #9EC8D9

CSS variables

:root {
  --galactic-ice-drift-1: #0D1C2A;
  --galactic-ice-drift-2: #1F364E;
  --galactic-ice-drift-3: #3D5A7B;
  --galactic-ice-drift-4: #6D8DB1;
  --galactic-ice-drift-5: #9EC8D9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "galactic-ice-drift": {
        1: "#0D1C2A",
        2: "#1F364E",
        3: "#3D5A7B",
        4: "#6D8DB1",
        5: "#9EC8D9",
      }
    }
  }
}

Hex values

Color 1#0D1C2A

Color 2#1F364E

Color 3#3D5A7B

Color 4#6D8DB1

Color 5#9EC8D9

Accessibility

Contrast checker

1.4:1Fail

2.4:1Fail

5:1AA

9.6:1AAA

1.4:1Fail

1.7:1Fail

3.6:1AA18

6.9:1AA

2.4:1Fail

1.7:1Fail

2.1:1Fail

4:1AA18