Palette

Sapphire Veil Mist

Deep, regal blues and lighter misty shades, suggesting a luxurious sapphire curtain veiled in fog.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Veil Mist 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 Veil Mist.

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 Veil Mist

Overview

The "Sapphire Veil Mist" palette combines deep, regal blues with lighter, misty shades, suggesting a luxurious sapphire curtain veiled in fog. This elegant collection transitions from the profound #000080 (Navy) and the rich #191970 (Midnight Blue) through the classic #4169E1 (Royal Blue) and the serene #6495ED (Cornflower Blue), culminating in the soft, ethereal #B0C4DE (Light Steel Blue). It’s an ideal choice for designs aiming to convey sophistication, tranquility, and a touch of mystery, perfect for luxury brands, high-end fashion, or editorial content that requires a classic, refined blue aesthetic.

Best used for

Luxury apparel or accessory branding
High-end interior design portfolios
Elegant event invitations
Art gallery or museum websites
Sophisticated editorial layouts
Spa and relaxation service marketing

Suggested color roles

primary

#191970 (Midnight Blue) - A deep, authoritative blue for main headers, backgrounds, or key brand elements, conveying elegance and depth.

secondary

#4169E1 (Royal Blue) - A vibrant, classic blue for subheadings, interactive elements, or sections needing a touch more energy and clarity.

accent

#6495ED (Cornflower Blue) - A softer, more inviting blue for subtle highlights, decorative elements, or secondary calls-to-action.

background

#B0C4DE (Light Steel Blue) - The lightest shade, providing a gentle, misty backdrop that allows the deeper blues to stand out beautifully.

text

#000080 (Navy) - The darkest blue, ensuring excellent readability for body text against lighter backgrounds, maintaining a cohesive and regal feel.

Accessibility notes

Ensure robust contrast for text, especially when using #6495ED on backgrounds like #B0C4DE; prefer darker blues for text.
#000080 text on #B0C4DE should meet WCAG AA contrast standards for all text sizes.
Avoid using subtle color shifts alone to convey critical information; supplement with icons or text.
Consider legibility of lighter blues on slightly darker backgrounds for users with low vision.

Recommended combinations

Regal Depth

Navy for strong branding elements, light steel blue for clean backgrounds, and royal blue for accents.

#000080 · #B0C4DE · #4169E1

Misty Elegance

Midnight blue for main content blocks, cornflower blue for highlights, and light steel blue as background.

#191970 · #6495ED · #B0C4DE

Veiled Contrast

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

#4169E1 · #000080 · #6495ED

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-veil-mist": {
        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 Veil Mist

Sapphire Gemstone Depth

Sapphire Geode Shard

Aqua Jewel