Back to palettes

Palette

Starry Night Dream

Deep, enchanting blues and purples paint the serene wonder of a vast, star-filled night sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starry Night Dream 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 Starry Night Dream.

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

Data visualization

#0F0A2A#2A1A5A#4A3A8A#7D6ABF#A38CD4

Palette guide

How to use Starry Night Dream

Overview

The "Starry Night Dream" palette (version 2) invites users into a realm of enchanting blues and purples, capturing the serene wonder of a vast, star-filled night sky. Starting with the profound #0F0A2A, a very dark indigo, it gracefully transitions through rich, deep purples like #2A1A5A and #4A3A8A. The palette brightens considerably with the ethereal #7D6ABF and culminates in the soft, luminous #A38CD4, reminiscent of distant nebulae or a dreamlike glow. This collection is ideal for designers creating immersive digital experiences, mystical branding, or serene interfaces that evoke wonder and tranquility. Developers can employ these hex codes to craft sophisticated dark mode themes, fantasy applications, or artistic visualizations with a harmonious blend of cool, cosmic tones.

Best used for

  • Fantasy or mystical themed games/apps
  • Meditation or mindfulness platforms
  • Artistic portfolios or creative studios
  • Elegant dark mode UI/UX designs
  • Branding for spiritual or wellness products
  • Digital art depicting dreams or cosmic scenes

Suggested color roles

primary

#0F0A2A - The deepest, darkest indigo-purple. Perfect for main backgrounds, large headers, or hero sections, providing an immersive sense of night.

secondary

#2A1A5A - A rich, deep blue-purple. Excellent for secondary panels, content cards, or navigation bars, adding structure and depth.

accent

#7D6ABF - A vibrant, medium lavender-purple. Use for interactive elements, highlights, or call-to-action buttons, offering a discernible contrast and a touch of magic.

background

#2A1A5A - A versatile deep blue-purple that serves as a rich, yet not overwhelming, background for most content.

text

#A38CD4 - A light, ethereal lavender. Ideal for primary body text on darker backgrounds like #0F0A2A or #2A1A5A, ensuring good readability and a dreamlike feel.

Accessibility notes

  • #A38CD4 provides good contrast for body text against #0F0A2A and #2A1A5A.
  • Be cautious when using #4A3A8A or #7D6ABF for small text on other dark palette colors; always verify contrast ratios.
  • Ensure interactive elements have clear visual states, as some color differences are subtle.
  • For critical or very small text, a pure white or very light gray (#F8F8F8) might be necessary on the darkest backgrounds.

Recommended combinations

Dreamy Depths

Creates a profound, layered dark background effect, ideal for immersive digital environments.

#0F0A2A · #2A1A5A · #4A3A8A

Mystic Glow

Provides a clear visual hierarchy with lighter tones against a darker base, suitable for navigation or data.

#2A1A5A · #7D6ABF · #A38CD4

Enchanted Horizon

Combines the deepest blue with a mid-tone and a light, ethereal shade for a balanced, calming composition.

#0F0A2A · #4A3A8A · #A38CD4

CSS variables

:root {
  --starry-night-dream-2-1: #0F0A2A;
  --starry-night-dream-2-2: #2A1A5A;
  --starry-night-dream-2-3: #4A3A8A;
  --starry-night-dream-2-4: #7D6ABF;
  --starry-night-dream-2-5: #A38CD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-dream-2": {
        1: "#0F0A2A",
        2: "#2A1A5A",
        3: "#4A3A8A",
        4: "#7D6ABF",
        5: "#A38CD4",
      }
    }
  }
}

Related searches

deep purple dream palettecosmic lavender color schememystical night ui colorsserene dark mode purplestarry night fantasy theme

Palette colors

Hex values

Color 1#0F0A2A
·
Color 2#2A1A5A
·
Color 3#4A3A8A
·
Color 4#7D6ABF
·
Color 5#A38CD4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.1:1Fail
4.3:1AA18
6.6:1AA
2
1.3:1Fail
1.6:1Fail
3.4:1AA18
5.2:1AA
3
2.1:1Fail
1.6:1Fail
2.1:1Fail
3.2:1AA18
4
4.3:1AA18
3.4:1AA18
2.1:1Fail
1.5:1Fail
5
6.6:1AA
5.2:1AA
3.2:1AA18
1.5:1Fail

Similar palettes

More like Starry Night Dream

View all dark
Midnight Starfall Gaze
Cosmic Dance Galaxy
Cosmic Dust Trail
Cosmic Dust Whisper
Cosmic Galaxy Dust
Cosmic Starlight Gaze