Palette

Sapphire Reef Wonders

Brilliant blues evoke crystal-clear ocean waters and the vibrant life of a sapphire reef.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6F2F5#B0D8E8#79BBE0#4C99D3#2C6CBF

Palette guide

How to use Sapphire Reef Wonders

Overview

The Sapphire Reef Wonders palette evokes the crystal-clear waters and vibrant life of a sun-drenched sapphire reef. This collection gracefully transitions from the airy, near-white #E6F2F5 to the deep, anchoring #2C6CBF, offering a refreshing and inviting gradient. Designers can create visually appealing and user-friendly interfaces, utilizing the mid-tones like #B0D8E8 and #79BBE0 to build gentle depth and visual interest. Developers will find these blues excellent for crafting clean, modern, and highly readable digital experiences that convey openness and natural beauty. It's ideal for projects seeking a light, optimistic, and trustworthy aesthetic.

Best used for

Travel agencies and tourism websites
Children's educational materials
Health and wellness product branding
Cloud computing and data visualization
Eco-tourism and outdoor adventure companies
Clean technology startups

Suggested color roles

primary

#4C99D3 - A vibrant, clear blue that provides a confident and inviting foundation. Excellent for main headings, important links, or primary call-to-action buttons.

secondary

#79BBE0 - A softer, yet engaging blue that complements the primary, suitable for subheadings, informational cards, or secondary navigation.

accent

#2C6CBF - A deeper, impactful blue that adds a touch of authority and focus. Perfect for critical alerts, strong calls-to-action, or important data points.

background

#E6F2F5 - A very light, almost white blue that provides an airy, clean, and expansive backdrop, making darker elements pop with clarity.

text

#2C6CBF - The darkest blue, offering excellent readability for text on light backgrounds like #E6F2F5 or #B0D8E8. Black or charcoal can also be used for general body text.

Accessibility notes

Ensure #2C6CBF or a dark gray/black text has sufficient contrast on #E6F2F5 and #B0D8E8 backgrounds.
Avoid using #B0D8E8 or #79BBE0 for text on light backgrounds as contrast will likely be insufficient.
Check contrast ratios for all text sizes and interactive elements against WCAG 2.1 AA guidelines.
For links, ensure they are clearly distinguishable, perhaps with an underline or bolding, especially if color is the primary differentiator.

Recommended combinations

Clear Sky Contrast

A refreshing high-contrast pairing for clean, modern interfaces and clear typography.

#E6F2F5 · #2C6CBF · #B0D8E8

Water Gradient

Ideal for smooth background transitions, progress bars, or subtle graphical elements evoking water.

#B0D8E8 · #79BBE0 · #4C99D3

Vibrant Clarity

Use #E6F2F5 as a background, #4C99D3 for main content, and #2C6CBF for strong calls-to-action or key data.

#E6F2F5 · #4C99D3 · #2C6CBF

CSS variables

:root {
  --sapphire-reef-wonders-1: #E6F2F5;
  --sapphire-reef-wonders-2: #B0D8E8;
  --sapphire-reef-wonders-3: #79BBE0;
  --sapphire-reef-wonders-4: #4C99D3;
  --sapphire-reef-wonders-5: #2C6CBF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-reef-wonders": {
        1: "#E6F2F5",
        2: "#B0D8E8",
        3: "#79BBE0",
        4: "#4C99D3",
        5: "#2C6CBF",
      }
    }
  }
}

Hex values

Color 1#E6F2F5

Color 2#B0D8E8

Color 3#79BBE0

Color 4#4C99D3

Color 5#2C6CBF

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.7:1Fail

4.6:1AA

1.3:1Fail

1.4:1Fail

2:1Fail

3.5:1AA18

1.8:1Fail

1.4:1Fail

1.5:1Fail

2.5:1Fail

2.7:1Fail

2:1Fail

1.5:1Fail

1.7:1Fail

4.6:1AA

3.5:1AA18

2.5:1Fail

1.7:1Fail

Similar palettes

More like Sapphire Reef Wonders

Celestial Ocean Mirror

Coastal Rockpool

Emerald Coast Sparkle