Palette

Aqua Marine Vista

A tranquil blend of blues and teals, reminiscent of clear shallow waters and vast open seas under a bright sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E86AB#5DC9E3#9FE2ED#D4F4F9#F8FDFF

Palette guide

How to use Aqua Marine Vista

Overview

The Aqua Marine Vista palette offers a tranquil blend of blues and teals, reminiscent of clear shallow waters and vast open seas under a bright sky. This cool collection spans from the deep, grounding #2E86AB to the delicate, bright #F8FDFF, with #5DC9E3 and #9FE2ED 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 #2E86AB as a deep, anchoring primary for headings, important buttons, or strong graphic elements, providing sophisticated contrast.

secondary

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

accent

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

background

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

text

For optimal legibility, use #2E86AB or a deep charcoal against the lightest backgrounds like #F8FDFF. For secondary text, #5DC9E3 can be effective on lighter backgrounds.

Accessibility notes

Ensure #2E86AB text on #F8FDFF background meets WCAG AA contrast standards.
Avoid pairing #9FE2ED or #D4F4F9 for small text on #F8FDFF, 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

Ocean Vista

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

#F8FDFF · #2E86AB · #5DC9E3

Water Gradient

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

#9FE2ED · #D4F4F9 · #5DC9E3

Serene Horizon

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

#D4F4F9 · #F8FDFF · #9FE2ED

CSS variables

:root {
  --aqua-marine-vista-1: #2E86AB;
  --aqua-marine-vista-2: #5DC9E3;
  --aqua-marine-vista-3: #9FE2ED;
  --aqua-marine-vista-4: #D4F4F9;
  --aqua-marine-vista-5: #F8FDFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aqua-marine-vista": {
        1: "#2E86AB",
        2: "#5DC9E3",
        3: "#9FE2ED",
        4: "#D4F4F9",
        5: "#F8FDFF",
      }
    }
  }
}

Hex values

Color 1#2E86AB

Color 2#5DC9E3

Color 3#9FE2ED

Color 4#D4F4F9

Color 5#F8FDFF

Accessibility

Contrast checker

2.1:1Fail

2.8:1Fail

3.5:1AA18

4:1AA18

2.1:1Fail

1.3:1Fail

1.7:1Fail

1.9:1Fail

2.8:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

3.5:1AA18

1.7:1Fail

1.2:1Fail

1.1:1Fail

4:1AA18

1.9:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Aqua Marine Vista