Palette

Azure Reef Currents

Dive into tranquil marine depths with a serene blend of deep blues and refreshing aquas.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1931#18536C#2E86AB#7DE5ED#A7D9D8

Palette guide

How to use Azure Reef Currents

Overview

The Azure Reef Currents palette invites users to dive into tranquil marine depths with a serene blend of deep blues and refreshing aquas. It transitions from the profound, almost black navy of #0A1931, through the grounding deep blues of #18536C and #2E86AB, to the vibrant aquas of #7DE5ED and #A7D9D8. Designers and developers will find these hues exceptionally versatile for creating sophisticated, calming, and immersive digital experiences. The palette's harmonious blend of cool tones evokes clarity, peace, and a strong connection to pristine underwater environments, ideal for applications requiring a soothing yet engaging aesthetic.

Best used for

Marine conservation organizations
Luxury spa and wellness brands
High-end technology interfaces (calm)
Underwater photography portfolios
Educational platforms on oceanography
Architectural design with water features

Suggested color roles

primary

#0A1931 serves as a deep, anchoring primary, ideal for strong branding, main navigation, or important headers.

secondary

#18536C provides a stable, professional secondary, suitable for subheadings, content sections, or supportive graphics.

accent

#2E86AB delivers a vibrant, engaging accent, perfect for interactive elements, hover states, or eye-catching details.

background

#A7D9D8 creates a very light, expansive backdrop, ensuring content clarity and an airy, tranquil feel.

text

Use #0A1931 or white/near-white for body text on darker backgrounds, and #0A1931 on #A7D9D8 for optimal legibility.

Accessibility notes

Ensure #0A1931 text on #A7D9D8 backgrounds meets WCAG AA contrast standards.
Avoid using #A7D9D8 or #7DE5ED for small text on light backgrounds due to insufficient contrast.
Use #0A1931 or #18536C for critical interactive elements to ensure clear visibility.
For large text, #2E86AB on #A7D9D8 can work, but always verify contrast ratios.

Recommended combinations

Reef Depths

Creates a profound, immersive gradient, ideal for dark mode themes or impactful hero sections.

#0A1931 · #18536C · #2E86AB

Aqua Flow

Excellent for light, airy layouts, using lighter tones for backgrounds and mid-blue for structure.

#A7D9D8 · #7DE5ED · #2E86AB

Current Contrast

A strong contrasting trio for clear visual hierarchy, combining deep primary with light background and supportive secondary.

#0A1931 · #A7D9D8 · #18536C

CSS variables

:root {
  --azure-reef-currents-1: #0A1931;
  --azure-reef-currents-2: #18536C;
  --azure-reef-currents-3: #2E86AB;
  --azure-reef-currents-4: #7DE5ED;
  --azure-reef-currents-5: #A7D9D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-reef-currents": {
        1: "#0A1931",
        2: "#18536C",
        3: "#2E86AB",
        4: "#7DE5ED",
        5: "#A7D9D8",
      }
    }
  }
}

Hex values

Color 1#0A1931

Color 2#18536C

Color 3#2E86AB

Color 4#7DE5ED

Color 5#A7D9D8

Accessibility

Contrast checker

2.1:1Fail

4.3:1AA18

12:1AAA

11.3:1AAA

2.1:1Fail

5.7:1AA

5.4:1AA

4.3:1AA18

2.1:1Fail

2.8:1Fail

2.7:1Fail

12:1AAA

5.7:1AA

2.8:1Fail

1.1:1Fail

11.3:1AAA

5.4:1AA

2.7:1Fail

1.1:1Fail

Similar palettes

More like Azure Reef Currents

Azure Reef Currents

See it in context.

Ready when you are.

Built with Azure Reef Currents.

How to use Azure Reef Currents

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Reef Depths

Aqua Flow

Current Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Azure Reef Currents