Back to palettes

Palette

Velvet Starry Night

Deep, luxurious blues and greys conjure images of a serene, velvet-cloaked night sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CBDDE2#7CA1B3#4A6E8C#2D4E6B#1C2B3A

Palette guide

How to use Velvet Starry Night

Overview

The Velvet Starry Night palette offers a sophisticated journey into deep, luxurious blues and greys, perfect for evoking a serene, elegant mood. Anchored by the profound #1C2B3A and the rich #2D4E6B, it conjures images of a tranquil night sky. The mid-tones, like #4A6E8C and #7CA1B3, provide depth and transition, while the lightest shade, #CBDDE2, offers a gentle contrast, reminiscent of distant starlight. This collection is ideal for projects requiring a sense of calm, professionalism, and understated luxury, providing a cohesive and harmonious visual experience for digital interfaces and print. Designers will appreciate its versatility for creating dramatic yet inviting aesthetics.

Best used for

  • Luxury brand identity and packaging
  • High-end website and mobile app interfaces (especially dark modes)
  • Elegant event invitations and marketing materials
  • Sophisticated professional presentations
  • Interior design concepts for tranquil spaces
  • Branding for premium tech or financial services

Suggested color roles

primary

Use this deep, rich blue, #2D4E6B, for core branding elements, main calls-to-action, or significant header backgrounds to establish a strong, elegant foundation.

secondary

This medium-dark blue, #4A6E8C, serves well for subheadings, active navigation states, or secondary graphical elements, providing depth without overpowering.

accent

Deploy this muted medium blue, #7CA1B3, for subtle highlights, interactive elements, or progress indicators where a gentle pop of color is needed without being overly bright.

background

Ideal for dark mode interfaces, large background areas, or full-screen overlays, #1C2B3A creates a luxurious, immersive, and serene backdrop.

text

This light blue-grey, #CBDDE2, is perfect for primary body text, ensuring excellent readability against the darker palette colors, especially #1C2B3A and #2D4E6B.

Accessibility notes

  • Ensure #CBDDE2 text has sufficient contrast against darker backgrounds like #1C2B3A or #2D4E6B for WCAG AAA compliance.
  • Avoid using #4A6E8C or #2D4E6B for small text against #1C2B3A to prevent readability issues; reserve them for larger headings or graphical elements.
  • Verify that interactive elements using #7CA1B3 or #7CA1B3 against #4A6E8C meet minimum contrast ratios.
  • Consider slightly increasing font weight for body text set in #CBDDE2 on dark backgrounds to enhance perceived readability.

Recommended combinations

Deep Night Contrast

Excellent for defining core structure with a deep background, strong primary text, and a vibrant highlight for calls-to-action or key data.

#1C2B3A · #2D4E6B · #CBDDE2

Muted Serenity

Ideal for secondary content areas, subtle card designs, or data visualizations where a harmonious, less stark contrast is desired.

#4A6E8C · #7CA1B3 · #CBDDE2

Elegant Gradient

Perfect for creating smooth visual transitions in backgrounds, layered elements, or subtle gradients that evoke depth and sophistication.

#2D4E6B · #4A6E8C · #7CA1B3

CSS variables

:root {
  --velvet-starry-night-2-1: #CBDDE2;
  --velvet-starry-night-2-2: #7CA1B3;
  --velvet-starry-night-2-3: #4A6E8C;
  --velvet-starry-night-2-4: #2D4E6B;
  --velvet-starry-night-2-5: #1C2B3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-starry-night-2": {
        1: "#CBDDE2",
        2: "#7CA1B3",
        3: "#4A6E8C",
        4: "#2D4E6B",
        5: "#1C2B3A",
      }
    }
  }
}

Related searches

dark blue color paletteelegant night colorsvelvet blue grey schemeserene dark themeluxury blue ui design

Palette colors

Hex values

Color 1#CBDDE2
·
Color 2#7CA1B3
·
Color 3#4A6E8C
·
Color 4#2D4E6B
·
Color 5#1C2B3A
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.8:1AA18
6.2:1AA
10.3:1AAA
2
2:1Fail
2:1Fail
3.2:1AA18
5.2:1AA
3
3.8:1AA18
2:1Fail
1.6:1Fail
2.7:1Fail
4
6.2:1AA
3.2:1AA18
1.6:1Fail
1.7:1Fail
5
10.3:1AAA
5.2:1AA
2.7:1Fail
1.7:1Fail

Similar palettes

More like Velvet Starry Night

View all dark
Velvet Midnight Sky
Cosmic Starlight Gaze
Desert Night Sky
Starlight Velvet Night
Starry Night Horizon
Celestial Night Sky