Palette

Velvet Night Sky

Deep indigos and mysterious purples are accented with hints of starlight, evoking a vast and elegant night sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Velvet Night 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 Velvet Night Sky.

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

Data visualization

#1A1A2E#0F3460#533483#E94560#FCFFB0

Palette guide

How to use Velvet Night Sky

Overview

The Velvet Night Sky palette takes inspiration from deep indigos and mysterious purples, accented with hints of starlight, evoking a vast and elegant night sky. Its foundation is built on deep tones like #1A1A2E and #0F3460, enriched by the enigmatic #533483. Dramatic accents come from the vivid #E94560 and the bright, starlike #FCFFB0. This palette is designed for creative projects that require a sense of cosmic depth, drama, and vibrant contrast, perfect for capturing attention and conveying a luxurious, imaginative mood in digital or print media.

Best used for

Sci-fi themed games and interactive experiences
Event branding for galas, concerts, or festivals
Creative agency websites and portfolios
Fashion or beauty brands with a bold, modern edge
Digital art and illustration backgrounds
Marketing materials for entertainment industries

Suggested color roles

primary

Utilize #1A1A2E as the primary background or main structural color, establishing a profound, immersive dark canvas.

secondary

Employ #0F3460 for prominent sections, large typography, or navigation elements, adding a rich, deep blue layer.

accent

Reserve #E94560 for high-impact calls-to-action, progress indicators, or vibrant graphical details to create strong focal points.

background

The deep #1A1A2E creates an immersive, cosmic background, allowing brighter elements to truly shine.

text

Use #FCFFB0 for primary text on dark backgrounds to ensure maximum readability, mimicking starlight. A bright white also works well.

Accessibility notes

Pair #FCFFB0 with #1A1A2E or #0F3460 for excellent text contrast.
Exercise caution when using #E94560 for small text; it often requires a very dark background to pass contrast checks.
Avoid using #533483 for critical text on similar dark tones; consider a lighter background or a more contrasting text color.
Ensure interactive elements using #E94560 have sufficient surrounding contrast to stand out.

Recommended combinations

Cosmic Depth

Forms a deep, mysterious base ideal for backgrounds, large headers, or immersive digital environments.

#1A1A2E · #0F3460 · #533483

Starlight Pop

Perfect for dark mode interfaces where a dark canvas is punctuated by vibrant accents and bright, readable text.

#1A1A2E · #E94560 · #FCFFB0

Galactic Glow

Creates an ethereal, glowing effect, suitable for illustrations, subtle animations, or artistic presentations.

#0F3460 · #533483 · #FCFFB0

CSS variables

:root {
  --velvet-night-sky-1: #1A1A2E;
  --velvet-night-sky-2: #0F3460;
  --velvet-night-sky-3: #533483;
  --velvet-night-sky-4: #E94560;
  --velvet-night-sky-5: #FCFFB0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-night-sky": {
        1: "#1A1A2E",
        2: "#0F3460",
        3: "#533483",
        4: "#E94560",
        5: "#FCFFB0",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#0F3460

Color 3#533483

Color 4#E94560

Color 5#FCFFB0

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

4.5:1AA18

16.3:1AAA

1.4:1Fail

1.3:1Fail

3.3:1AA18

11.9:1AAA

1.8:1Fail

1.3:1Fail

2.5:1Fail

9.2:1AAA