Palette

Aqua Marine Reef

A refreshing gradient of blues and greens, evoking the clear, tranquil waters of a pristine coral reef.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aqua Marine Reef 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 Aqua Marine Reef.

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

Data visualization

#1A3A3A#3B6D6D#6EC5C6#A1DFE0#D3F7F7

Palette guide

How to use Aqua Marine Reef

Overview

The Aqua Marine Reef palette offers a refreshing gradient of blues and greens, evoking the clear, tranquil waters of a pristine coral reef. This cool collection spans from the deep, grounding #1A3A3A to the delicate, bright #D3F7F7, with #3B6D6D and #6EC5C6 providing lush, inviting transitions. Perfect for designs seeking an organic, natural, and subtly restorative aesthetic, these hex codes are ideal for wellness branding, eco-friendly web interfaces, or editorial content focused on nature. Designers and developers will find these colors excellent for crafting serene digital experiences, from herbal product sites to sustainable living platforms, where a calm, authentic aesthetic is desired.

Best used for

Tropical vacation and travel branding
Spa and wellness retreat websites
Marine conservation initiatives
Summer event invitations and decor
Nature photography portfolios
Calm and relaxing app interfaces

Suggested color roles

primary

Utilize #1A3A3A as a deep, anchoring primary for headings, important buttons, or strong graphic elements, providing sophisticated contrast.

secondary

Employ #3B6D6D for supporting elements, subheadings, or rich background panels, offering a deeper tone without losing the palette's softness.

accent

Apply #6EC5C6 for subtle decorative accents, interactive states, or delicate graphic details, providing a gentle highlight.

background

The lightest tone, #D3F7F7, is perfect as a clean, elegant background, ensuring excellent readability and a refined feel.

text

For optimal legibility, use #1A3A3A or a deep charcoal against the lightest backgrounds like #D3F7F7. For secondary text, #3B6D6D can be effective on lighter backgrounds.

Accessibility notes

Ensure #1A3A3A text on #D3F7F7 background meets WCAG AA contrast standards.
Avoid pairing #A1DFE0 or #6EC5C6 for small text on #D3F7F7, as contrast will be too low.
Provide clear visual focus indicators for interactive elements, ensuring they stand out against similar background tones.
For critical information, consider using the darkest palette color for text on the lightest background.

Recommended combinations

Reef Base

Provides a clean, elegant foundation for content with a pristine background and soft, romantic accents.

#D3F7F7 · #1A3A3A · #3B6D6D

Ocean Gradient

Ideal for layered UI components or subtle branding, creating depth with closely related blue and green tones.

#6EC5C6 · #A1DFE0 · #3B6D6D

Serene Shimmer

Excellent for backgrounds with a gentle luminosity or for decorative elements that need a soft, inviting sheen.

#A1DFE0 · #D3F7F7 · #6EC5C6

CSS variables

:root {
  --aqua-marine-reef-1: #1A3A3A;
  --aqua-marine-reef-2: #3B6D6D;
  --aqua-marine-reef-3: #6EC5C6;
  --aqua-marine-reef-4: #A1DFE0;
  --aqua-marine-reef-5: #D3F7F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aqua-marine-reef": {
        1: "#1A3A3A",
        2: "#3B6D6D",
        3: "#6EC5C6",
        4: "#A1DFE0",
        5: "#D3F7F7",
      }
    }
  }
}

Hex values

Color 1#1A3A3A

Color 2#3B6D6D

Color 3#6EC5C6

Color 4#A1DFE0

Color 5#D3F7F7

Accessibility

Contrast checker

2.1:1Fail

6.1:1AA

8.3:1AAA

10.8:1AAA

2.1:1Fail

2.9:1Fail

3.9:1AA18

5.1:1AA

6.1:1AA

2.9:1Fail

1.4:1Fail

1.8:1Fail

8.3:1AAA

3.9:1AA18

1.4:1Fail

1.3:1Fail

10.8:1AAA

5.1:1AA

1.8:1Fail

1.3:1Fail

Similar palettes

More like Aqua Marine Reef