Back to palettes

Palette

Midnight Velvet Starry

A rich, elegant palette of deep blues and purples, like velvet illuminated by the distant glow of starlight.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Velvet Starry 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 Velvet Starry.

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

Data visualization

#0B0A21#1C1A3F#2F2E5E#4A487B#6A689B

Palette guide

How to use Midnight Velvet Starry

Overview

The Midnight Velvet Starry palette captures the essence of deep blues and purples, like velvet illuminated by distant starlight. Its foundation is the profound #0B0A21, complemented by a gradient of rich tones including #1C1A3F, #2F2E5E, and #4A487B. The palette culminates in #6A689B, a soft, ethereal hue reminiscent of starlight. This elegant scheme is perfect for designers and developers aiming to create sophisticated, mystical, or luxurious designs. It lends itself well to high-end branding, digital interfaces, and artistic projects that evoke a sense of cosmic wonder and refined elegance.

Best used for

  • Astronomy-themed websites and educational content
  • Elegant night event invitations and branding
  • Luxurious digital interfaces and dark modes
  • Mystical or fantasy game art and concepts
  • High-end jewelry or fashion branding
  • Digital art with a cosmic or ethereal theme

Suggested color roles

primary

Use #0B0A21 as the deepest, foundational blue-purple for backgrounds or large sections, setting an elegant, immersive tone.

secondary

Employ #1C1A3F for supporting elements, sub-headers, or layered UI components, adding subtle depth.

accent

Apply #6A689B sparingly for key highlights, interactive elements, or decorative details to evoke a soft, star-like glow.

background

Utilize #0B0A21 for an immersive deep space canvas, perfect for sophisticated dark themes.

text

Use #6A689B for primary text to ensure readability on dark backgrounds, and #4A487B for secondary information or larger headings.

Accessibility notes

  • #6A689B provides the best contrast for text on the darkest hues like #0B0A21 and #1C1A3F, ensuring readability.
  • Use #4A487B for larger text or headings where its contrast with darker blues and purples is acceptable, but avoid for small body text.
  • For general body text, ensure sufficient contrast by choosing #6A689B or a bright white to meet WCAG AA standards.
  • Avoid using #1C1A3F directly on #0B0A21 for small text due to potentially low contrast, which can hinder readability.

Recommended combinations

Starlight Contrast

Ideal for main branding, headlines, and key information, creating a sophisticated and highly readable design.

#0B0A21 · #6A689B · #4A487B

Cosmic Depth

Excellent for layered backgrounds, subtle UI elements, or gradients that evoke the vastness of deep space.

#0B0A21 · #1C1A3F · #2F2E5E

Celestial Accent

Perfect for call-to-action buttons, interactive elements, or highlighting important content with an ethereal touch.

#2F2E5E · #6A689B · #4A487B

CSS variables

:root {
  --midnight-velvet-starry-1: #0B0A21;
  --midnight-velvet-starry-2: #1C1A3F;
  --midnight-velvet-starry-3: #2F2E5E;
  --midnight-velvet-starry-4: #4A487B;
  --midnight-velvet-starry-5: #6A689B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-velvet-starry": {
        1: "#0B0A21",
        2: "#1C1A3F",
        3: "#2F2E5E",
        4: "#4A487B",
        5: "#6A689B",
      }
    }
  }
}

Related searches

starry night color palettedeep space color schemeelegant blue purple themedark mode cosmic designluxurious velvet night colors

Palette colors

Hex values

Color 1#0B0A21
·
Color 2#1C1A3F
·
Color 3#2F2E5E
·
Color 4#4A487B
·
Color 5#6A689B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2.3:1Fail
3.8:1AA18
2
1.2:1Fail
1.3:1Fail
2:1Fail
3.2:1AA18
3
1.5:1Fail
1.3:1Fail
1.5:1Fail
2.4:1Fail
4
2.3:1Fail
2:1Fail
1.5:1Fail
1.6:1Fail
5
3.8:1AA18
3.2:1AA18
2.4:1Fail
1.6:1Fail

Similar palettes

More like Midnight Velvet Starry

View all dark