Palette

Sapphire Coast Dreams

A serene journey through deep sapphire waters to soft sandy shores under a clear sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F456E#407BA7#7EB9DD#A9D4E9#E8F5FB

Palette guide

How to use Sapphire Coast Dreams

Overview

The Sapphire Coast Dreams palette evokes a tranquil journey from deep ocean depths to sunlit sandy shores. This serene collection features a range of blues, starting with the profound navy of #1F456E, transitioning through the comforting mid-tones of #407BA7 and #7EB9DD, and culminating in the airy, near-white #E8F5FB. Ideal for designs seeking to convey peace, relaxation, or natural beauty, it's particularly well-suited for travel, wellness, or environmental themes. Designers can use its gentle gradient to create depth and flow, while developers will appreciate the clear hierarchy it provides for UI elements.

Best used for

Coastal resort or travel branding
Wellness and spa websites
Environmental conservation initiatives
Serene mobile app interfaces
Interior design mood boards
Calm and inviting presentation themes

Suggested color roles

primary

Use #1F456E (Deep Navy Blue) as a grounding, sophisticated primary for headers, footers, or main navigation, providing a sense of stability and depth.

secondary

Apply #407BA7 (Ocean Blue) as a versatile mid-tone for secondary content, backgrounds, or larger UI components, offering a balanced and calming presence.

accent

Utilize #7EB9DD (Sky Blue) for subtle accents, interactive elements, or to highlight key information without being overly bold.

background

Employ #E8F5FB (Very Light Blue) as an airy, clean background that simulates a clear sky or a pristine environment, allowing darker elements to stand out gently.

text

For light backgrounds like #E8F5FB, use dark text (e.g., charcoal or #1F456E). For darker elements, use a light text (e.g., white or #E8F5FB).

Accessibility notes

Ensure sufficient contrast when using #A9D4E9 or #7EB9DD for text, especially on light backgrounds.
#1F456E provides excellent contrast with #E8F5FB for body text.
Avoid using #E8F5FB as text on a white background; it lacks contrast.
Test all text/background pairs for WCAG AA compliance, particularly lighter blues on each other.

Recommended combinations

Deep Ocean

Creates a deep, immersive marine feel, perfect for nature-focused branding or backgrounds.

#1F456E · #407BA7 · #7EB9DD

Coastal Breeze

A light, airy combination ideal for clean interfaces, header areas, or subtle gradients.

#7EB9DD · #A9D4E9 · #E8F5FB

Shoreline Calm

High contrast for readability, combining deep navy with a light background and a calming mid-blue accent.

#1F456E · #E8F5FB · #407BA7

CSS variables

:root {
  --sapphire-coast-dreams-1: #1F456E;
  --sapphire-coast-dreams-2: #407BA7;
  --sapphire-coast-dreams-3: #7EB9DD;
  --sapphire-coast-dreams-4: #A9D4E9;
  --sapphire-coast-dreams-5: #E8F5FB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-coast-dreams": {
        1: "#1F456E",
        2: "#407BA7",
        3: "#7EB9DD",
        4: "#A9D4E9",
        5: "#E8F5FB",
      }
    }
  }
}

Hex values

Color 1#1F456E

Color 2#407BA7

Color 3#7EB9DD

Color 4#A9D4E9

Color 5#E8F5FB

Accessibility

Contrast checker

2.2:1Fail

4.6:1AA

6.2:1AA

8.8:1AAA

2.2:1Fail

2.1:1Fail

2.9:1Fail

4.1:1AA18

4.6:1AA

2.1:1Fail

1.3:1Fail

1.9:1Fail

6.2:1AA

2.9:1Fail

1.3:1Fail

1.4:1Fail

8.8:1AAA

4.1:1AA18

1.9:1Fail

1.4:1Fail

Similar palettes

More like Sapphire Coast Dreams

Cerulean Coastline Calm