Palette

Starlight Canyon Glow

Deep, mystical purples and soft lavenders, capturing the dramatic contrast of starlight over a silent canyon at night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight Canyon Glow 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 Canyon Glow.

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

Data visualization

#201030#402050#603070#A080C0#D0C0E0

Palette guide

How to use Starlight Canyon Glow

Overview

The "Starlight Canyon Glow" palette captures the serene mystery of a desert night sky, blending deep, rich purples like #201030 and #402050 with lighter, ethereal lavenders such as #A080C0 and #D0C0E0. Ideal for projects needing a sophisticated, mystical, or cosmic feel, it offers a dramatic yet harmonious contrast. Designers can leverage the depth of #603070 for primary elements, reserving the lighter hues for highlights and readable text. This palette is perfect for creating immersive digital experiences or branding with an otherworldly elegance. It provides a strong foundation for both dark mode interfaces and artistic visual compositions, evoking a sense of wonder and depth.

Best used for

Luxury brand websites or apps
Astrology or spiritual wellness platforms
High-end event invitations
Creative portfolio sites with a unique aesthetic
Dark mode UI themes for apps or dashboards
Digital art or gaming interfaces

Suggested color roles

primary

#402050 - A deep, rich purple excellent for main headers, prominent buttons, or large background sections to establish the mystical tone.

secondary

#603070 - A vibrant mid-tone purple, effective for secondary calls-to-action, active states, or sub-headings, providing depth without overwhelming.

accent

#A080C0 - A soft, luminous lavender that shines as an accent for interactive elements, icons, or subtle highlights, drawing attention effectively.

background

#201030 - The deepest, darkest purple, perfect for a dominant background to create a luxurious, immersive, and dark-themed environment.

text

#D0C0E0 - This very light lavender provides excellent contrast against the darker purples like #201030 and #402050, ensuring readability for main body text. Alternatively, a pure white can be used for maximum contrast.

Accessibility notes

Ensure #D0C0E0 text on #201030 or #402050 backgrounds meets WCAG AA contrast ratios for readability.
Avoid using #A080C0 on #603070 for critical text, as contrast may be insufficient for some users.
Use sufficient white space to separate elements, especially with varying shades of purple, to prevent visual fatigue.
Provide alternative text for graphical elements where color conveys essential information, as color perception can vary.

Recommended combinations

Celestial Header

Ideal for dark mode headers, with #201030 as background, #D0C0E0 for main titles, and #A080C0 for subtle accents or icons.

#201030 · #D0C0E0 · #A080C0

Mystic Button

A primary call-to-action button using #603070 as the base, #D0C0E0 for text, and #A080C0 for hover states or borders.

#603070 · #D0C0E0 · #A080C0

Canyon Gradient

Creates a subtle, atmospheric gradient background or card design, transitioning from deeper purples to lighter lavender.

#402050 · #603070 · #A080C0

CSS variables

:root {
  --starlight-canyon-glow-1: #201030;
  --starlight-canyon-glow-2: #402050;
  --starlight-canyon-glow-3: #603070;
  --starlight-canyon-glow-4: #A080C0;
  --starlight-canyon-glow-5: #D0C0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-canyon-glow": {
        1: "#201030",
        2: "#402050",
        3: "#603070",
        4: "#A080C0",
        5: "#D0C0E0",
      }
    }
  }
}

Hex values

Color 1#201030

Color 2#402050

Color 3#603070

Color 4#A080C0

Color 5#D0C0E0

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

5.4:1AA

10.4:1AAA

1.3:1Fail

1.4:1Fail

4.1:1AA18

8:1AAA

1.8:1Fail

1.4:1Fail

2.9:1Fail

5.7:1AA

5.4:1AA

4.1:1AA18

2.9:1Fail

1.9:1Fail

10.4:1AAA

8:1AAA

5.7:1AA

1.9:1Fail

Similar palettes

More like Starlight Canyon Glow

Celestial Glimmer Dust

Celestial Night Bloom

Cosmic Night Bloom