Back to palettes

Palette

Midnight Star Whisper

Deep blues and purples that capture the silent beauty of a star-filled midnight sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Star Whisper 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 Midnight Star Whisper.

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

Data visualization

#191970#483D8B#6A5ACD#8A2BE2#BA55D3

Palette guide

How to use Midnight Star Whisper

Overview

The Midnight Star Whisper palette unveils a captivating gradient of deep blues transitioning into rich purples, evoking the silent, mystical beauty of a star-filled night. Beginning with the profound #191970, it flows through #483D8B and #6A5ACD, culminating in the vibrant #8A2BE2 and #BA55D3. This collection is ideal for designers and developers seeking to create an energetic yet sophisticated aesthetic. Its harmonious blend of cool tones is perfect for creative tech, fantasy gaming, or any project that aims to convey depth, mystery, and a touch of vibrant cosmic wonder, ensuring an engaging visual experience.

Best used for

  • Creative tech company branding
  • Fantasy or sci-fi game interfaces
  • Artistic portfolios and digital illustrations
  • Event branding (music festivals, art shows)
  • Spiritual or mystical themed websites
  • Interactive digital experiences

Suggested color roles

primary

Utilize #191970 as the foundational deep blue, providing a stable and immersive base for your design.

secondary

Employ #483D8B for main content areas or section backgrounds, offering a rich, harmonious mid-tone.

accent

Reserve #BA55D3 for vibrant calls-to-action, interactive elements, or striking graphic accents to capture attention.

background

The deep #191970 or #483D8B creates a profound and sophisticated backdrop, ideal for dark themes.

text

For primary text on dark backgrounds, #BA55D3 ensures excellent readability and a vibrant touch. For subheadings, #6A5ACD is effective.

Accessibility notes

  • Ensure #BA55D3 text on #191970 or #483D8B meets WCAG AA contrast standards for body text.
  • Be cautious using #6A5ACD on #483D8B for small text due to potentially insufficient contrast.
  • For larger headlines, #8A2BE2 on #191970 can be impactful, but always verify readability.
  • If using lighter backgrounds, a dark text color like #191970 or a near-black is recommended.

Recommended combinations

Deep Cosmic

Ideal for overall website themes, providing a strong dark base with a rich mid-tone and a vibrant, readable accent.

#191970 · #483D8B · #BA55D3

Purple Haze

Perfect for creating subtle gradients, layered effects, or progress indicators within UI elements.

#483D8B · #6A5ACD · #8A2BE2

Vibrant Night

Use for prominent feature blocks or callout boxes, where the vibrant purples need to stand out against the deep blue.

#191970 · #8A2BE2 · #BA55D3

CSS variables

:root {
  --midnight-star-whisper-1: #191970;
  --midnight-star-whisper-2: #483D8B;
  --midnight-star-whisper-3: #6A5ACD;
  --midnight-star-whisper-4: #8A2BE2;
  --midnight-star-whisper-5: #BA55D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-star-whisper": {
        1: "#191970",
        2: "#483D8B",
        3: "#6A5ACD",
        4: "#8A2BE2",
        5: "#BA55D3",
      }
    }
  }
}

Related searches

deep blue purple palettecosmic gradient colorsmystical night themevibrant purple bluecelestial artwork colors

Palette colors

Hex values

Color 1#191970
·
Color 2#483D8B
·
Color 3#6A5ACD
·
Color 4#8A2BE2
·
Color 5#BA55D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
2.5:1Fail
3.8:1AA18
2
1.6:1Fail
1.7:1Fail
1.5:1Fail
2.3:1Fail
3
2.8:1Fail
1.7:1Fail
1.1:1Fail
1.3:1Fail
4
2.5:1Fail
1.5:1Fail
1.1:1Fail
1.5:1Fail
5
3.8:1AA18
2.3:1Fail
1.3:1Fail
1.5:1Fail

Similar palettes

More like Midnight Star Whisper

View all dark