Palette

Starlight Reef Whisper

A celestial journey into deep purples and blues, mirroring the quiet magic of a starlit, mysterious reef.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight Reef Whisper 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 Starlight Reef Whisper.

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

Data visualization

#0E0A3C#2B1A66#4A3590#1C0F4A#695AA8

Palette guide

How to use Starlight Reef Whisper

Overview

The Starlight Reef Whisper palette embarks on a celestial journey, blending deep purples and blues to evoke the quiet magic of a mysterious, starlit reef. This palette features the profound #0E0A3C and the rich #1C0F4A as its dark anchors, transitioning through the luxurious #2B1A66 and the vibrant #4A3590. The ethereal #695AA8 adds a touch of subtle luminescence. Designers can leverage this unique combination to create captivating digital experiences, from dark-themed websites to imaginative game environments. The interplay of deep, grounding shades with brighter, shimmering accents provides excellent versatility for establishing visual depth and highlighting key elements. Developers will find these hex codes perfect for crafting elegant interfaces that convey mystery, sophistication, and a touch of the fantastical.

Best used for

Fantasy game environment design
Mysterious and elegant brand identities
Creative writing or art portfolio websites
Luxury packaging design with a dark theme
Astrology or spiritual content platforms
Interactive digital art installations

Suggested color roles

primary

Utilize #0E0A3C or #1C0F4A as the dominant background color for a deep, immersive canvas, perfect for setting a mysterious and sophisticated mood.

secondary

Apply #2B1A66 for secondary content areas, card headers, or navigation, providing a rich, supportive color that complements the darker base.

accent

Leverage #4A3590 for call-to-action buttons, interactive highlights, or significant data points, drawing immediate attention with its vibrant glow.

background

The darkest shades, #0E0A3C and #1C0F4A, are excellent for primary backgrounds in a dark UI, creating an atmospheric and profound depth.

text

For text on dark backgrounds like #0E0A3C or #1C0F4A, use #695AA8 for primary content, ensuring good readability. For lighter elements, a dark gray or black is suitable.

Accessibility notes

Ensure #695AA8 has sufficient contrast against darker shades like #0E0A3C and #1C0F4A for all body text.
Avoid using #2B1A66 directly on #1C0F4A for small text; check contrast ratios carefully to prevent readability issues.
For interactive elements, confirm that #4A3590 provides clear visual distinction against its surrounding dark background.
Consider increasing text size or using a bolder font weight for any text placed on mid-tone backgrounds like #2B1A66.

Recommended combinations

Reef Depths

Ideal for creating layered, dark backgrounds or subtle depth in complex UI components, evoking mystery.

#0E0A3C · #1C0F4A · #2B1A66

Celestial Glow

Perfect for glowing effects, hover states, or highlighting interactive elements against a deep, dark base.

#1C0F4A · #4A3590 · #695AA8

Mystic Harmony

Great for illustrating progression or hierarchy in data visualizations, or for elegant decorative elements in a dark theme.

#2B1A66 · #4A3590 · #695AA8

CSS variables

:root {
  --starlight-reef-whisper-1: #0E0A3C;
  --starlight-reef-whisper-2: #2B1A66;
  --starlight-reef-whisper-3: #4A3590;
  --starlight-reef-whisper-4: #1C0F4A;
  --starlight-reef-whisper-5: #695AA8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-reef-whisper": {
        1: "#0E0A3C",
        2: "#2B1A66",
        3: "#4A3590",
        4: "#1C0F4A",
        5: "#695AA8",
      }
    }
  }
}

Hex values

Color 1#0E0A3C

Color 2#2B1A66

Color 3#4A3590

Color 4#1C0F4A

Color 5#695AA8

Accessibility

Contrast checker

1.3:1Fail

2:1Fail

1.1:1Fail

3.2:1AA18

1.3:1Fail

1.5:1Fail

1.2:1Fail

2.5:1Fail

2:1Fail

1.5:1Fail

1.8:1Fail

1.6:1Fail

1.1:1Fail

1.2:1Fail

1.8:1Fail

3:1Fail

3.2:1AA18

2.5:1Fail

1.6:1Fail

3:1Fail

Similar palettes

More like Starlight Reef Whisper

Celestial Night Bloom

Celestial Night Sky