Palette

Starlight Canyon Sky

Gaze into the clear, expansive night sky over a vast canyon, sprinkled with distant stars.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#191970#4B0082#778899#ADD8E6

Palette guide

How to use Starlight Canyon Sky

Overview

The Starlight Canyon Sky palette evokes the serene, expansive beauty of a deep night. Dominated by a true #000000 black, it features rich, dark hues like the profound #191970 midnight blue and the mysterious #4B0082 indigo. These deep tones are beautifully contrasted by the subtle, atmospheric #778899 light slate gray, reminiscent of distant rock formations or hazy starlight, and the ethereal #ADD8E6 light blue, suggesting a faint glow or distant nebula. This palette is ideal for projects needing a sophisticated, dramatic, or contemplative aesthetic, guiding users through a visually rich, immersive experience without being overly stark. Developers will find these hex codes useful for creating themed interfaces, while designers can craft powerful branding.

Best used for

Luxury brand websites or apps
Astrology or space-themed content
High-end event invitations or branding
Dark mode UI/UX designs
Mysterious or dramatic digital art
Premium photography portfolios

Suggested color roles

primary

#000000 (Black) - Use as the dominant background for a truly deep, infinite feel, or for high-contrast large text elements in a dark theme.

secondary

#191970 (Midnight Blue) - Excellent for secondary backgrounds, large headers, or interactive elements to add depth without losing the dark mood.

accent

#ADD8E6 (Light Blue) - Ideal for calls-to-action, active states, small icons, or highlights that need to pop against the dark backdrop, simulating starlight.

background

#000000 (Black) - The quintessential choice for a vast, night-sky background, providing a canvas for lighter elements to shine.

text

#ADD8E6 (Light Blue) or #778899 (Light Slate Gray) - For main body text, #ADD8E6 offers excellent readability against dark backgrounds. #778899 can be used for secondary or less prominent text. White or near-white (#F8F8F8) is also a strong recommendation for primary text.

Accessibility notes

Ensure sufficient contrast between #000000 backgrounds and all text/interactive elements; aim for at least AA compliance with WCAG.
Use #ADD8E6 or a bright white for primary text against #000000, #191970, or #4B0082 to ensure readability.
Be cautious when pairing #778899 with other dark colors like #191970 or #4B0082 as contrast may be insufficient for smaller text.
Reserve #4B0082 for larger display text or decorative elements rather than small body copy due to its dark and saturated nature.

Recommended combinations

Starry Night

Perfect for main UI where #000000 is the background, #191970 for cards or sections, and #ADD8E6 for interactive elements or text.

#000000 · #191970 · #ADD8E6

Deep Canyon

Evokes a deep, mysterious atmosphere; use #4B0082 for headers, #778899 for sub-text, and #ADD8E6 for small highlights.

#4B0082 · #778899 · #ADD8E6

Celestial Glow

A softer, ethereal combination for illustrations, gradients, or secondary content blocks, offering depth with subtle contrast.

#191970 · #778899 · #ADD8E6

CSS variables

:root {
  --starlight-canyon-sky-1: #000000;
  --starlight-canyon-sky-2: #191970;
  --starlight-canyon-sky-3: #4B0082;
  --starlight-canyon-sky-4: #778899;
  --starlight-canyon-sky-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-canyon-sky": {
        1: "#000000",
        2: "#191970",
        3: "#4B0082",
        4: "#778899",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#191970

Color 3#4B0082

Color 4#778899

Color 5#ADD8E6

Accessibility

Contrast checker

1.4:1Fail

1.6:1Fail

5.8:1AA

13.7:1AAA

1.4:1Fail

1.1:1Fail

4.1:1AA18

9.7:1AAA

1.6:1Fail

1.1:1Fail

3.6:1AA18

8.5:1AAA

5.8:1AA

4.1:1AA18

3.6:1AA18

2.4:1Fail

13.7:1AAA

9.7:1AAA

8.5:1AAA

2.4:1Fail

Similar palettes

More like Starlight Canyon Sky

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow