Palette

Star Dust Twilight

A celestial gradient reflecting the magic of stardust scattered across the twilight sky.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Star Dust Twilight 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 Star Dust Twilight.

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

Data visualization

#1F0F3D#5C3E7C#B0C4DE#F4E8D4#0F0F0F

Palette guide

How to use Star Dust Twilight

Overview

The 'Star Dust Twilight' palette captures the serene elegance of a starlit night, blending deep, cool tones with soft, ethereal lights. It begins with the profound #1F0F3D (Deep Violet), moving through the contemplative #5C3E7C (Muted Purple), and then introduces the dreamy #B0C4DE (Light Steel Blue) and the gentle #F4E8D4 (Cream). A grounding #0F0F0F (Near Black) provides a strong anchor. This palette is perfect for designers and developers seeking to evoke calm, mystery, and sophisticated beauty. It's ideal for projects that benefit from a celestial, tranquil, or subtly luxurious aesthetic, making it versatile for various digital and print applications.

Best used for

Serene website designs for wellness or meditation
Celestial-themed branding and packaging
Elegant digital art and illustrations
Luxury nightwear or bedding e-commerce
Mystical event invitations and decor
Applications requiring a calm, sophisticated UI

Suggested color roles

primary

Use #1F0F3D or #0F0F0F as primary dark backgrounds to establish a deep, tranquil atmosphere.

secondary

Muted Purple (#5C3E7C) works well for secondary UI elements, providing depth without being overwhelming.

accent

Light Steel Blue (#B0C4DE) can serve as a soft highlight or for interactive elements that need subtle visibility.

background

Cream (#F4E8D4) or Light Steel Blue (#B0C4DE) can act as light backgrounds, offering a gentle contrast to darker elements.

text

For dark backgrounds like #0F0F0F, use #F4E8D4 or white for body text. For lighter backgrounds, #0F0F0F provides excellent contrast.

Accessibility notes

Ensure sufficient contrast for text on #1F0F3D or #5C3E7C; light text like #F4E8D4 is usually required.
The light #B0C4DE and #F4E8D4 offer good contrast for dark text, but check for minimum text sizes.
Avoid using #5C3E7C as text on #1F0F3D background due to insufficient contrast.
Always test color combinations with accessibility tools, especially for interactive elements.

Recommended combinations

Twilight Sky

Creates a deep night sky effect with a luminous highlight, perfect for backgrounds or hero sections.

#0F0F0F · #1F0F3D · #B0C4DE

Soft Cosmic

Ideal for a gentle, ethereal feel in branding or UI, using the cream as a primary background.

#5C3E7C · #F4E8D4 · #B0C4DE

Deep Serenity

Excellent for creating depth and warmth, with #F4E8D4 providing a soft, readable text color.

#1F0F3D · #5C3E7C · #F4E8D4

CSS variables

:root {
  --star-dust-twilight-1: #1F0F3D;
  --star-dust-twilight-2: #5C3E7C;
  --star-dust-twilight-3: #B0C4DE;
  --star-dust-twilight-4: #F4E8D4;
  --star-dust-twilight-5: #0F0F0F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "star-dust-twilight": {
        1: "#1F0F3D",
        2: "#5C3E7C",
        3: "#B0C4DE",
        4: "#F4E8D4",
        5: "#0F0F0F",
      }
    }
  }
}

Hex values

Color 1#1F0F3D

Color 2#5C3E7C

Color 3#B0C4DE

Color 4#F4E8D4

Color 5#0F0F0F

Accessibility

Contrast checker

2:1Fail

9.9:1AAA

14.5:1AAA

1.1:1Fail

2:1Fail

4.8:1AA

7.1:1AAA

2.2:1Fail

9.9:1AAA

4.8:1AA

1.5:1Fail

10.8:1AAA

14.5:1AAA

7.1:1AAA

1.5:1Fail

15.8:1AAA

1.1:1Fail

2.2:1Fail

10.8:1AAA

15.8:1AAA

Similar palettes

More like Star Dust Twilight

View all cool

Celestial Shimmer

Galactic Aurora Borealis

Nocturnal Ocean Gleam

Stellar Veil Glimmer

Amethyst Cavern Glow

Amethyst Mystic Grotto