Back to palettes

Palette

Twilight Crystal Depths

Deep blues and frosty grays conjure images of an ancient, mysterious cavern filled with dimly glowing crystals.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Crystal Depths 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 Twilight Crystal Depths.

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

Data visualization

#0F1A2A#1A3A4A#3A5E6E#7FA0B0#C4D4E4

Palette guide

How to use Twilight Crystal Depths

Overview

The Twilight Crystal Depths palette conjures images of an ancient, mysterious cavern filled with dimly glowing crystals, featuring deep blues and frosty grays. With a foundational #0F1A2A (Deep Midnight Blue) and the supporting #1A3A4A (Dark Teal-Blue), this scheme exudes mystery and sophistication. The glimmering #3A5E6E (Mid-Tone Teal) and #7FA0B0 (Muted Steel Blue) add a crystal-like quality, while #C4D4E4 (Pale Blue-Grey) provides an ethereal light. This palette is genuinely useful for designers and developers crafting sci-fi or fantasy game UIs, mysterious tech branding, or dark mode interfaces, offering a sophisticated and immersive visual experience.

Best used for

  • Sci-fi or fantasy game user interfaces
  • Mysterious tech brand identities
  • Luxury watch or jewelry display concepts
  • Dark mode interfaces for applications
  • Abstract art and digital media projects
  • Event invitations for exclusive galas

Suggested color roles

primary

Utilize #0F1A2A (Deep Midnight Blue) as a foundational, mysterious primary color for main backgrounds or headers.

secondary

Apply #1A3A4A (Dark Teal-Blue) for supportive content areas, subheadings, or background textures that add depth.

accent

Introduce #7FA0B0 (Muted Steel Blue) as a glimmering highlight for interactive elements, icons, or crystal-like details.

background

Employ #C4D4E4 (Pale Blue-Grey) for frosty, ethereal backgrounds, simulating a light source or subtle highlights.

text

For dark backgrounds, use #C4D4E4 or white. For lighter backgrounds, #0F1A2A or a dark charcoal provides excellent readability.

Accessibility notes

  • The mid-tone #7FA0B0 on #C4D4E4 might not pass contrast for small text, so verify carefully.
  • Ensure text on #0F1A2A, #1A3A4A, and #3A5E6E is very light (e.g., white or #C4D4E4) for readability.
  • Use the darkest colors for text on the lightest backgrounds to maintain optimal legibility.
  • Prioritize high contrast for interactive elements in a dark theme to improve usability and clarity.

Recommended combinations

Deep Cavern

Creates a strong, mysterious base with a deep mid-dark and a glimmering, crystal-like accent.

#0F1A2A · #1A3A4A · #7FA0B0

Frosty Glow

Offers a smooth transition from dark blue to a frosty light, ideal for atmospheric effects or subtle gradients.

#1A3A4A · #3A5E6E · #C4D4E4

Crystal Contrast

Combines a deep base with an icy highlight and an ethereal background for striking visual appeal.

#0F1A2A · #7FA0B0 · #C4D4E4

CSS variables

:root {
  --twilight-crystal-depths-1: #0F1A2A;
  --twilight-crystal-depths-2: #1A3A4A;
  --twilight-crystal-depths-3: #3A5E6E;
  --twilight-crystal-depths-4: #7FA0B0;
  --twilight-crystal-depths-5: #C4D4E4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-crystal-depths": {
        1: "#0F1A2A",
        2: "#1A3A4A",
        3: "#3A5E6E",
        4: "#7FA0B0",
        5: "#C4D4E4",
      }
    }
  }
}

Related searches

deep blue grey palettemysterious crystal colorsdark sci-fi uifrosty evening schemetech luxury branding

Palette colors

Hex values

Color 1#0F1A2A
·
Color 2#1A3A4A
·
Color 3#3A5E6E
·
Color 4#7FA0B0
·
Color 5#C4D4E4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
6.3:1AA
11.6:1AAA
2
1.5:1Fail
1.7:1Fail
4.3:1AA18
7.9:1AAA
3
2.5:1Fail
1.7:1Fail
2.5:1Fail
4.6:1AA
4
6.3:1AA
4.3:1AA18
2.5:1Fail
1.8:1Fail
5
11.6:1AAA
7.9:1AAA
4.6:1AA
1.8:1Fail

Similar palettes

More like Twilight Crystal Depths

View all cool
Abyssal Bioluminescence
Abyssal Current Glide
Bioluminescent Abyss
Deep Ocean Bloom
Midnight Ocean Trench
Arctic Ice Cavern