Palette

Sapphire Velvet Nights

Regal blues transitioning from deep velvet to moonlit skies, exuding luxury.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Velvet Nights 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 Sapphire Velvet Nights.

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

Data visualization

#000080#191970#4169E1#6495ED#B0C4DE

Palette guide

How to use Sapphire Velvet Nights

Overview

The "Sapphire Velvet Nights" palette evokes the luxurious transition from deep velvet to moonlit skies, exuding profound elegance and mystery. This collection features the intense depth of #000080 (Navy) and #191970 (Midnight Blue), flowing into the rich #4169E1 (Royal Blue) and the serene #6495ED (Cornflower Blue), finally reaching the soft luminosity of #B0C4DE (Light Steel Blue). It's an ideal choice for designs that demand sophistication, a sense of luxury, and a nocturnal allure, perfect for high-end fashion, exclusive events, or digital experiences that aim for a dramatic, refined aesthetic.

Best used for

Luxury brand websites and apps
Exclusive event invitations and decor
High-fashion editorial spreads
Nightlife or entertainment venue branding
Elegant dark mode UI designs
Jewelry design showcases

Suggested color roles

primary

#191970 (Midnight Blue) - A deep, enveloping blue perfect for dominant backgrounds, headers, or sophisticated brand elements, setting a luxurious tone.

secondary

#4169E1 (Royal Blue) - A vibrant, regal blue for key calls-to-action, important links, or to define significant sections with clarity.

accent

#6495ED (Cornflower Blue) - A softer, yet engaging blue ideal for subtle highlights, interactive states, or to introduce a touch of ethereal glow.

background

#000080 (Navy) - The darkest shade, creating an immersive, velvety backdrop that enhances the luminosity of other colors.

text

#B0C4DE (Light Steel Blue) - The lightest blue, ensuring excellent readability for body text against the dark backgrounds, maintaining the elegant, moonlit theme.

Accessibility notes

Crucially, ensure strong contrast between #B0C4DE text and the dark backgrounds like #000080 or #191970 to meet WCAG AA standards.
Avoid using #6495ED for very small text on slightly darker blue backgrounds as readability might be compromised.
Provide visual cues other than color alone for interactive elements to assist users with color vision deficiencies.
Consider a slightly bolder font weight for lighter text on dark backgrounds for improved legibility.

Recommended combinations

Velvet Shadow

Deepest navy as a rich background, light steel blue for contrasting text, and royal blue for key elements.

#000080 · #B0C4DE · #4169E1

Moonlit Glow

Midnight blue for main content areas, cornflower blue for accents, and light steel blue for subtle highlights.

#191970 · #6495ED · #B0C4DE

Elegant Depth

Royal blue for primary sections, navy for strong borders or text, and cornflower blue for secondary details.

#4169E1 · #000080 · #6495ED

CSS variables

:root {
  --sapphire-velvet-nights-1: #000080;
  --sapphire-velvet-nights-2: #191970;
  --sapphire-velvet-nights-3: #4169E1;
  --sapphire-velvet-nights-4: #6495ED;
  --sapphire-velvet-nights-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-velvet-nights": {
        1: "#000080",
        2: "#191970",
        3: "#4169E1",
        4: "#6495ED",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#4169E1

Color 4#6495ED

Color 5#B0C4DE

Accessibility

Contrast checker

1.1:1Fail

3.3:1AA18

5.4:1AA

9:1AAA

1.1:1Fail

3.1:1AA18

5:1AA

8.3:1AAA

3.3:1AA18

3.1:1AA18

1.6:1Fail

2.7:1Fail

5.4:1AA

5:1AA

1.6:1Fail

1.7:1Fail

9:1AAA

8.3:1AAA

2.7:1Fail

1.7:1Fail

Similar palettes

More like Sapphire Velvet Nights

Midnight Symphony Orchestra

Nocturnal Ocean Gleam

Sapphire Gemstone Depth