Palette

Azure Reef Sanctuary

Dive into the vibrant, life-filled waters of a hidden coral reef at midday, serene and inviting.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Reef Sanctuary 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 Azure Reef Sanctuary.

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

Data visualization

#007FFF#00BFFF#7FFFD4#E0BBE4#4A6C6F

Palette guide

How to use Azure Reef Sanctuary

Overview

The Azure Reef Sanctuary palette dives into the vibrant, life-filled waters of a hidden coral reef at midday, serene and inviting. It features the dynamic blues of #007FFF and #00BFFF, the refreshing aquamarine of #7FFFD4, the soft lilac of #E0BBE4, and a grounding muted teal in #4A6C6F. Designers and developers will find this palette exceptionally versatile for creating engaging, peaceful, and visually rich digital experiences. The harmonious blend of cool blues, a touch of green, and a surprising pastel purple evokes feelings of tranquility, wonder, and a strong connection to nature's beauty, ideal for applications that aim for a refreshing and memorable aesthetic.

Best used for

Marine conservation organizations
Spa and wellness brands (unique)
Art and creative portfolios
Tropical travel agencies
Children's educational apps (nature)
Fashion and lifestyle brands (serene)

Suggested color roles

primary

#007FFF serves as a vibrant and inviting primary, ideal for main calls to action, brand logos, or important headers.

secondary

#4A6C6F provides a deep, grounding secondary, suitable for subheadings, navigation, or foundational elements.

accent

#E0BBE4 delivers a unique, soft lilac accent, perfect for subtle highlights, interactive elements, or a touch of elegance.

background

#7FFFD4 creates a light, refreshing backdrop, ensuring content clarity and an airy, tranquil feel.

text

Use #4A6C6F or black for body text on #7FFFD4 or #E0BBE4 backgrounds for optimal legibility.

Accessibility notes

Ensure #4A6C6F text on #7FFFD4 backgrounds meets WCAG AA contrast standards.
Avoid using #E0BBE4 for small text on light backgrounds due to insufficient contrast.
Use #007FFF or #4A6C6F for critical interactive elements to ensure clear visibility.
For large text, #00BFFF on #7FFFD4 can work, but always verify contrast ratios.

Recommended combinations

Reef Depths

Creates a deep, immersive gradient, ideal for hero sections or sophisticated data displays.

#4A6C6F · #007FFF · #00BFFF

Sanctuary Glow

Excellent for light, airy layouts, using lighter tones for backgrounds and a vibrant blue for highlights.

#7FFFD4 · #E0BBE4 · #00BFFF

Unique Contrast

A balanced trio for clear visual hierarchy, combining a grounded primary with a refreshing background and soft accent.

#4A6C6F · #7FFFD4 · #E0BBE4

CSS variables

:root {
  --azure-reef-sanctuary-1: #007FFF;
  --azure-reef-sanctuary-2: #00BFFF;
  --azure-reef-sanctuary-3: #7FFFD4;
  --azure-reef-sanctuary-4: #E0BBE4;
  --azure-reef-sanctuary-5: #4A6C6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-reef-sanctuary": {
        1: "#007FFF",
        2: "#00BFFF",
        3: "#7FFFD4",
        4: "#E0BBE4",
        5: "#4A6C6F",
      }
    }
  }
}

Hex values

Color 1#007FFF

Color 2#00BFFF

Color 3#7FFFD4

Color 4#E0BBE4

Color 5#4A6C6F

Accessibility

Contrast checker

1.8:1Fail

3.1:1AA18

2.3:1Fail

1.5:1Fail

1.8:1Fail

1.7:1Fail

1.3:1Fail

2.7:1Fail

3.1:1AA18

1.7:1Fail

1.4:1Fail

4.7:1AA

2.3:1Fail

1.3:1Fail

1.4:1Fail

3.4:1AA18

1.5:1Fail

2.7:1Fail

4.7:1AA

3.4:1AA18

Similar palettes

More like Azure Reef Sanctuary