Back to palettes

Palette

Sapphire Night Sky

A profound blue gradient, reflecting the mystical depths of a starlit sapphire night sky.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1D37#1E3B68#3A63A8#6D93D4#B0CBEB

Palette guide

How to use Sapphire Night Sky

Overview

The Sapphire Night Sky palette embodies the serene and elegant expanse of a starlit night, rendered in a sophisticated gradient of blues. From the profound depth of #0A1D37 to the gentle luminescence of #B0CBEB, this collection offers a rich, harmonious flow. Designers can create a sense of calm sophistication, using the mid-tones like #3A63A8 and #6D93D4 to build visual interest and subtle transitions. Developers will find these blues excellent for crafting elegant user interfaces that feel both premium and inviting, suitable for a wide range of applications requiring a touch of class.

Best used for

  • Luxury product branding and packaging
  • High-end professional services websites
  • Elegant event invitations and marketing
  • Corporate identity and annual reports
  • Art gallery websites or exhibition design
  • Premium fashion and lifestyle brands

Suggested color roles

primary

#1E3B68 - A deep, reassuring blue that forms a solid foundation, conveying trust and sophistication. Ideal for main branding and navigation.

secondary

#3A63A8 - A balanced, medium blue that supports the primary, suitable for subheadings, informational panels, or secondary calls-to-action.

accent

#6D93D4 - A soft, yet distinct blue that provides gentle emphasis. Use for subtle highlights, interactive elements, or decorative details.

background

#0A1D37 - The darkest blue, creating an immersive, elegant backdrop that makes lighter elements appear refined and prominent.

text

#B0CBEB - A very light, almost pastel blue, offering excellent readability on dark backgrounds and contributing to the palette's overall serene mood.

Accessibility notes

  • Ensure #B0CBEB text has sufficient contrast on #0A1D37, #1E3B68, and #3A63A8 backgrounds.
  • Avoid using #6D93D4 for small text on lighter backgrounds as contrast may be too low.
  • For interactive elements, provide clear visual cues for hover and focus states, perhaps a slight color shift or underline.
  • Always validate color pairings against WCAG standards for text and UI components.

Recommended combinations

Elegant Contrast

Creates a sophisticated dark mode pairing, perfect for elegant typography and minimalist layouts.

#0A1D37 · #B0CBEB · #1E3B68

Sky Gradient

Ideal for smooth background transitions, headers, or subtle graphical elements evoking depth.

#1E3B68 · #3A63A8 · #6D93D4

Refined Accent

Use #0A1D37 as a backdrop, #3A63A8 for main content, and #6D93D4 for subtle interactive elements.

#0A1D37 · #3A63A8 · #6D93D4

CSS variables

:root {
  --sapphire-night-sky-1: #0A1D37;
  --sapphire-night-sky-2: #1E3B68;
  --sapphire-night-sky-3: #3A63A8;
  --sapphire-night-sky-4: #6D93D4;
  --sapphire-night-sky-5: #B0CBEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-night-sky": {
        1: "#0A1D37",
        2: "#1E3B68",
        3: "#3A63A8",
        4: "#6D93D4",
        5: "#B0CBEB",
      }
    }
  }
}

Related searches

elegant blue palettesophisticated night colorspremium blue brandingserene dark mode themedeep blue UI design

Palette colors

Hex values

Color 1#0A1D37
·
Color 2#1E3B68
·
Color 3#3A63A8
·
Color 4#6D93D4
·
Color 5#B0CBEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.8:1Fail
5.4:1AA
10.1:1AAA
2
1.5:1Fail
1.9:1Fail
3.6:1AA18
6.7:1AA
3
2.8:1Fail
1.9:1Fail
1.9:1Fail
3.6:1AA18
4
5.4:1AA
3.6:1AA18
1.9:1Fail
1.9:1Fail
5
10.1:1AAA
6.7:1AA
3.6:1AA18
1.9:1Fail

Similar palettes

More like Sapphire Night Sky

View all cool
Cityscape Twilight Azure
Deep Sapphire Gaze
Midnight Symphony Orchestra
Sapphire Gemstone Depth
Sapphire Velvet Nights
Aqua Jewel