Back to palettes

Palette

Sapphire Reef Light

Deep, mesmerizing blues and turquoises reflecting the serene light in a sapphire-rich coral reef.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0D263B#1A466A#306D9E#579BC8#071727

Palette guide

How to use Sapphire Reef Light

Overview

The Sapphire Reef Light palette captures the serene yet profound beauty of a deep sapphire reef, illuminated by subtle underwater light. This collection ranges from the exceptionally dark #071727 and #0D263B to the bright, clear #579BC8, offering a sophisticated spectrum of cool blues. Designers can craft immersive experiences, using the mid-tones like #1A466A and #306D9E to create depth and visual interest. Developers will find this palette excellent for building elegant and calming interfaces that promote focus and tranquility. It's ideal for conveying professionalism, depth, and a connection to natural beauty.

Best used for

  • Marine biology and conservation websites
  • Luxury spa and wellness center branding
  • Documentary film and photography portfolios
  • High-end furniture or interior design showcases
  • Corporate sustainability reports
  • Digital art platforms with a serene aesthetic

Suggested color roles

primary

#1A466A - A deep, calming blue that provides a stable and professional foundation, suitable for main content areas or navigation.

secondary

#306D9E - A vibrant, clear blue that offers a harmonious complement, ideal for subheadings, important links, or graphical elements.

accent

#579BC8 - A bright, refreshing blue that draws attention without overpowering. Perfect for call-to-action buttons, highlights, or interactive states.

background

#071727 - The darkest shade, providing an immersive, profound backdrop that allows lighter elements to stand out with clarity and elegance.

text

#579BC8 - A legible option for text on very dark backgrounds, or use a crisp white for optimal readability across all darker blues.

Accessibility notes

  • Ensure white or #579BC8 text has strong contrast on backgrounds like #071727, #0D263B, and #1A466A.
  • Avoid using #306D9E for small text on #579BC8 backgrounds due to insufficient contrast.
  • Test all text and interactive elements to meet WCAG 2.1 AA contrast requirements.
  • For links, consider an underline or bolding in addition to color to aid discoverability.

Recommended combinations

Deep Sea Clarity

A powerful contrast for dark mode interfaces, ensuring clear readability for headlines and important info.

#071727 · #579BC8 · #0D263B

Reef Layers

Creates a subtle, deep gradient for background textures, section dividers, or data visualization.

#0D263B · #1A466A · #306D9E

Lighted Focus

Use #071727 as a background with #306D9E for main content and #579BC8 for key interactive elements.

#071727 · #306D9E · #579BC8

CSS variables

:root {
  --sapphire-reef-light-1: #0D263B;
  --sapphire-reef-light-2: #1A466A;
  --sapphire-reef-light-3: #306D9E;
  --sapphire-reef-light-4: #579BC8;
  --sapphire-reef-light-5: #071727;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-reef-light": {
        1: "#0D263B",
        2: "#1A466A",
        3: "#306D9E",
        4: "#579BC8",
        5: "#071727",
      }
    }
  }
}

Related searches

deep ocean blue paletteserene reef colorsprofessional cool blues tranquil UI designaquatic branding scheme

Palette colors

Hex values

Color 1#0D263B
·
Color 2#1A466A
·
Color 3#306D9E
·
Color 4#579BC8
·
Color 5#071727
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
5.1:1AA
1.2:1Fail
2
1.6:1Fail
1.8:1Fail
3.3:1AA18
1.8:1Fail
3
2.8:1Fail
1.8:1Fail
1.8:1Fail
3.3:1AA18
4
5.1:1AA
3.3:1AA18
1.8:1Fail
6:1AA
5
1.2:1Fail
1.8:1Fail
3.3:1AA18
6:1AA

Similar palettes

More like Sapphire Reef Light

View all cool
Abyssal Current Glide
Cobalt Ocean Depths
Cobalt Tidepool
Deep Kelp Forest
Deep Ocean Bloom
Deep Ocean Dream