Back to palettes

Palette

Starlight Sapphire

Reflects the endless blue depths of space, studded with shimmering starlight and distant nebulae.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ECF2FF#9BB8CD#688DB6#3D6293#1A3A5B

Palette guide

How to use Starlight Sapphire

Overview

The Starlight Sapphire palette reflects the endless blue depths of space, studded with shimmering starlight and distant nebulae. This cool and sophisticated scheme ranges from the luminous, near-white #ECF2FF to the profound depth of #1A3A5B. Intermediate shades like the serene #9BB8CD, the balanced #688DB6, and the rich #3D6293 provide a harmonious transition. Designers can leverage this palette to create elegant and calming digital experiences, from corporate branding to serene web applications. The clear progression from light to dark offers excellent versatility for establishing visual hierarchy and guiding user focus. Developers will find these hex codes ideal for crafting professional and aesthetically pleasing interfaces that evoke trust and tranquility, perfect for a clean, cool aesthetic.

Best used for

  • Corporate or tech company branding
  • Educational platforms with a clean aesthetic
  • Financial services websites
  • Medical or wellness app interfaces
  • Luxury product displays with a cool tone
  • Photography portfolios for calm landscapes

Suggested color roles

primary

Use #1A3A5B as a dominant dark base for headers, footers, or background sections, conveying stability and depth.

secondary

Apply #3D6293 for secondary content blocks, navigation, or card backgrounds, offering a rich blue that supports the primary.

accent

Leverage #688DB6 for interactive elements, call-to-action buttons, or key information, providing a clear yet subdued highlight.

background

The lightest shade, #ECF2FF, is excellent for a clean, airy background. For a darker, more serious background, #1A3A5B provides a strong foundation.

text

For text on #ECF2FF, use #1A3A5B or #3D6293 for optimal readability. On darker backgrounds like #1A3A5B, #ECF2FF or #9BB8CD ensure clear legibility.

Accessibility notes

  • Ensure #ECF2FF has sufficient contrast against #1A3A5B for body text, meeting WCAG AA standards for readability.
  • Avoid using #9BB8CD on #688DB6 for small text; check contrast ratios carefully to prevent readability issues.
  • For interactive elements, confirm that accent colors like #688DB6 provide clear visual distinction against their surrounding background.
  • Consider using a darker text color (e.g., black or dark gray) for any text placed on the lightest color #ECF2FF.

Recommended combinations

Sapphire Depths

Ideal for creating layered backgrounds, data visualizations, or subtle gradients that convey depth and professionalism.

#1A3A5B · #3D6293 · #688DB6

Starlight Glow

Excellent for clean UI elements, subtle highlights, or for text and icons on dark backgrounds.

#ECF2FF · #9BB8CD · #688DB6

Cool Contrast

Suitable for high-contrast text and background pairings, ensuring readability in professional interfaces.

#1A3A5B · #ECF2FF · #3D6293

CSS variables

:root {
  --starlight-sapphire-1: #ECF2FF;
  --starlight-sapphire-2: #9BB8CD;
  --starlight-sapphire-3: #688DB6;
  --starlight-sapphire-4: #3D6293;
  --starlight-sapphire-5: #1A3A5B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-sapphire": {
        1: "#ECF2FF",
        2: "#9BB8CD",
        3: "#688DB6",
        4: "#3D6293",
        5: "#1A3A5B",
      }
    }
  }
}

Related searches

blue white color schemecool corporate palettecelestial blue designsapphire UI colorsclean modern blue palette

Palette colors

Hex values

Color 1#ECF2FF
·
Color 2#9BB8CD
·
Color 3#688DB6
·
Color 4#3D6293
·
Color 5#1A3A5B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.1:1AA18
5.6:1AA
10.4:1AAA
2
1.8:1Fail
1.7:1Fail
3:1AA18
5.6:1AA
3
3.1:1AA18
1.7:1Fail
1.8:1Fail
3.4:1AA18
4
5.6:1AA
3:1AA18
1.8:1Fail
1.9:1Fail
5
10.4:1AAA
5.6:1AA
3.4:1AA18
1.9:1Fail

Similar palettes

More like Starlight Sapphire

View all cool
Cobalt Night Sky
Starlight Azure Veil
Celestial Ocean Dream
Celestial Ocean Mirror
Cosmic Tide Whisper
Galactic Ice Nebula