Back to palettes

Palette

Deep Sapphire Tide

Reflecting the deep, clear blues of an ocean tide, with hints of sky and rich depths.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0D0E3#80A9C2#5082A1#2D5C7F#1A3D5A

Palette guide

How to use Deep Sapphire Tide

Overview

The Deep Sapphire Tide palette reflects the clear blues of an ocean tide, with hints of sky and rich depths. Ranging from the airy #B0D0E3 to the profound #1A3D5A, this palette offers an elegant and serene aesthetic. Designers can craft soothing digital experiences, sophisticated branding, and calming UI themes. Developers will find these hex codes perfect for projects related to wellness, nature, or any application that benefits from a cool, balanced, and visually appealing aesthetic. The gentle progression from #80A9C2 to #2D5C7F allows for excellent depth and visual harmony, making it versatile for both minimalist and detailed designs.

Best used for

  • Coastal resort or travel websites
  • Spa and wellness app interfaces
  • Nature photography portfolios (water themes)
  • Eco-friendly product branding
  • Luxury home decor inspiration sites
  • Corporate websites seeking a calm, professional look

Suggested color roles

primary

Utilize #5082A1 as the main background or primary content color, providing a calming, deep, and stable foundation.

secondary

Apply #2D5C7F for secondary content areas, panels, or navigation, offering a clear visual distinction and layered effect.

accent

Introduce #B0D0E3 as a soft, elegant accent for interactive elements, key features, or important data points, ensuring gentle visibility.

background

The deepest hue, #1A3D5A, is excellent for expansive backgrounds or header sections, establishing an immediate tone of profound depth and calm.

text

For optimal readability, use a dark charcoal or black on lighter colors like #B0D0E3. For darker backgrounds, white or a very light gray is recommended.

Accessibility notes

  • Ensure high contrast for text on #1A3D5A, #2D5C7F, and #5082A1 by using light text (e.g., white or #B0D0E3).
  • The lightest color, #B0D0E3, provides excellent contrast for primary text against the darker blues in the palette.
  • Avoid using #1A3D5A and #2D5C7F for small text or critical UI elements in close proximity without careful contrast checks.
  • Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Tidal Layers

Ideal for creating a layered, deep background or card system, conveying gradual depth and natural harmony.

#1A3D5A · #2D5C7F · #5082A1

Sapphire Flow

Use #5082A1 as a base, with #80A9C2 for secondary elements and #B0D0E3 for soft, ethereal highlights or interactive states.

#5082A1 · #80A9C2 · #B0D0E3

Oceanic Calm

Excellent for a dark, profound background with a clear, soft accent and a strong mid-tone for supporting details.

#1A3D5A · #B0D0E3 · #5082A1

CSS variables

:root {
  --deep-sapphire-tide-1: #B0D0E3;
  --deep-sapphire-tide-2: #80A9C2;
  --deep-sapphire-tide-3: #5082A1;
  --deep-sapphire-tide-4: #2D5C7F;
  --deep-sapphire-tide-5: #1A3D5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sapphire-tide": {
        1: "#B0D0E3",
        2: "#80A9C2",
        3: "#5082A1",
        4: "#2D5C7F",
        5: "#1A3D5A",
      }
    }
  }
}

Related searches

cool blue tide palettedeep sapphire hex codeselegant water UI designcalm blue color schemeoceanic branding colors

Palette colors

Hex values

Color 1#B0D0E3
·
Color 2#80A9C2
·
Color 3#5082A1
·
Color 4#2D5C7F
·
Color 5#1A3D5A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.4:1AA18
7:1AA
2
1.6:1Fail
1.7:1Fail
2.8:1Fail
4.5:1AA
3
2.6:1Fail
1.7:1Fail
1.7:1Fail
2.7:1Fail
4
4.4:1AA18
2.8:1Fail
1.7:1Fail
1.6:1Fail
5
7:1AA
4.5:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Deep Sapphire Tide

View all cool
Aqua Jewel
Art Deco Sapphire
Deep Sapphire Gaze
Emerald Grotto Shimmer
Sapphire Gemstone Depth
Sapphire Velvet Nights