Palette

Celestial Reverie

Deep, enchanting purples and blues with surprising bursts of cosmic light, like a far-off nebula.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Reverie 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 Celestial Reverie.

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

Data visualization

#1A1A2E#1F4068#E43F5A#8D83AE#BBE1FA

Palette guide

How to use Celestial Reverie

Overview

The "Celestial Reverie" palette offers a captivating blend of deep, enchanting purples and blues with surprising bursts of cosmic light. Anchored by the profound #1A1A2E and the rich #1F4068, it introduces a vibrant contrast with the striking #E43F5A (Carmine Pink). Softer, dreamy tones emerge with #8D83AE, and a luminous touch with #BBE1FA (Light Sky Blue). This palette is ideal for designs seeking a mysterious, dreamy, and deep aesthetic, reminiscent of a far-off nebula. Developers can create immersive dark mode experiences, while designers can craft unique branding that balances sophistication with a touch of playful cosmic wonder.

Best used for

Sci-fi game environments
Fantasy book cover designs
Creative digital art portfolios
Youthful tech branding
Event posters for music festivals
Unique fashion editorials

Suggested color roles

primary

#1A1A2E - The dominant deep background, creating a mysterious and immersive base.

secondary

#1F4068 - Use for secondary content areas, panels, or to add structured depth to the dark theme.

accent

#E43F5A - A powerful, contrasting accent for call-to-action buttons, warnings, or key interactive elements.

background

#1A1A2E - The foundational dark color, setting a deep, cosmic mood.

text

#BBE1FA - Excellent for primary text on dark backgrounds like #1A1A2E or #1F4068, ensuring high readability.

Accessibility notes

Text in #BBE1FA on #1A1A2E provides excellent contrast, suitable for all text sizes.
Ensure #E43F5A text on #1A1A2E also has good contrast, especially for critical information.
Avoid using #8D83AE for small text on #1F4068 as the contrast might be insufficient.
Use #BBE1FA or #E43F5A for interactive elements to ensure clear visibility against dark backgrounds.

Recommended combinations

Nebula Depth

Creates a classic dark theme with clear, luminous text, perfect for content-heavy sites.

#1A1A2E · #1F4068 · #BBE1FA

Cosmic Burst

Ideal for dynamic visuals, highlighting key features with a vibrant, unexpected pop of color.

#1F4068 · #E43F5A · #BBE1FA

Dreamy Veil

Use for subtle layering or to create an ethereal atmosphere in digital illustrations or backgrounds.

#1A1A2E · #8D83AE · #BBE1FA

CSS variables

:root {
  --celestial-reverie-1: #1A1A2E;
  --celestial-reverie-2: #1F4068;
  --celestial-reverie-3: #E43F5A;
  --celestial-reverie-4: #8D83AE;
  --celestial-reverie-5: #BBE1FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-reverie": {
        1: "#1A1A2E",
        2: "#1F4068",
        3: "#E43F5A",
        4: "#8D83AE",
        5: "#BBE1FA",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#1F4068

Color 3#E43F5A

Color 4#8D83AE

Color 5#BBE1FA

Accessibility

Contrast checker

1.6:1Fail

4.2:1AA18

4.9:1AA

12.4:1AAA

1.6:1Fail

2.6:1Fail

3:1AA18

7.7:1AAA

4.2:1AA18

2.6:1Fail

1.2:1Fail

3:1Fail

4.9:1AA

3:1AA18

1.2:1Fail

2.5:1Fail

12.4:1AAA

7.7:1AAA

3:1Fail

2.5:1Fail

Similar palettes

More like Celestial Reverie