Palette

Velvet Shadow

A rich, sophisticated palette of blues, reminiscent of luxurious velvet in a softly lit room.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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 Velvet Shadow

Overview

The Velvet Shadow palette offers a rich, sophisticated spectrum of blues, reminiscent of luxurious velvet in a softly lit room. From the profound #000080, it gracefully transitions through the deep #191970 and the vibrant #4169E1, culminating in the serene #6495ED and the airy #B0C4DE. This palette is ideal for creating designs that convey trust, elegance, and depth. Its harmonious blend of dark navies and lighter sky blues provides versatility for both corporate and creative applications, ensuring a refined and calming visual experience.

Best used for

corporate branding and websites
luxury automotive design
financial services interfaces
maritime or nautical themes
elegant interior accents
sophisticated software UI

Suggested color roles

primary

#000080 serves as a deep, authoritative anchor, perfect for primary branding, navigation, or sophisticated backgrounds.

secondary

#191970 offers a rich, supportive mid-tone, ideal for secondary elements, shadows, or deeper content blocks.

accent

#4169E1 or #6495ED provides a vibrant, yet refined accent, excellent for calls-to-action, highlights, or interactive elements.

background

Use #B0C4DE for a light, airy background. For a dramatic, immersive setting, #000080 with light text works powerfully.

text

On lighter backgrounds like #B0C4DE, a deep navy or black ensures optimal readability. For darker tones, pure white or a very light gray is recommended.

Accessibility notes

Ensure sufficient contrast between #B0C4DE and #6495ED for text, favoring larger sizes or darker shades for readability.
Text on #4169E1 may require careful contrast checking; white or a very dark neutral can work depending on context.
Avoid using #6495ED directly on #B0C4DE for small text or thin lines due to potential low contrast.
Verify interactive elements have clear visual distinctions, especially when using similar mid-tones for hover states.

Recommended combinations

Deep Sea

Creates a profound, trustworthy foundation, suitable for formal branding, headers, or corporate designs.

#000080 · #191970 · #4169E1

Sky Gradient

Offers a smooth, calming gradient, ideal for subtle backgrounds, illustrations, or airy interfaces.

#4169E1 · #6495ED · #B0C4DE

Navy Contrast

Combines the deepest tone with the lightest accents for a striking and elegant visual dynamic.

#000080 · #B0C4DE · #6495ED

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-shadow": {
        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 Velvet Shadow