Palette

Aqua Ocean Dream

A serene palette of vibrant blues and turquoises, mimicking the mesmerizing depths and clarity of an untouched aqua ocean.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aqua Ocean Dream 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 Ocean Dream.

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

Data visualization

#005F7F#007FA0#009FC0#00BFD9#00DFFF

Palette guide

How to use Aqua Ocean Dream

Overview

The Aqua Ocean Dream palette offers a serene collection of vibrant blues and turquoises, mimicking the mesmerizing depths and clarity of an untouched aqua ocean. This cool collection spans from the deep, grounding #005F7F to the delicate, bright #00DFFF, with #007FA0 and #009FC0 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 #005F7F as a deep, anchoring primary for headings, important buttons, or strong graphic elements, providing sophisticated contrast.

secondary

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

accent

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

background

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

text

For optimal legibility, use #005F7F or a deep charcoal against the lightest backgrounds like #00DFFF. For secondary text, #007FA0 can be effective on lighter backgrounds.

Accessibility notes

Ensure #005F7F text on #00DFFF background meets WCAG AA contrast standards.
Avoid pairing #009FC0 or #00BFD9 for small text on #00DFFF, 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 Depths

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

#00DFFF · #005F7F · #007FA0

Aqua Gradient

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

#009FC0 · #00BFD9 · #007FA0

Dreamy Shimmer

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

#00BFD9 · #00DFFF · #009FC0

CSS variables

:root {
  --aqua-ocean-dream-1: #005F7F;
  --aqua-ocean-dream-2: #007FA0;
  --aqua-ocean-dream-3: #009FC0;
  --aqua-ocean-dream-4: #00BFD9;
  --aqua-ocean-dream-5: #00DFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aqua-ocean-dream": {
        1: "#005F7F",
        2: "#007FA0",
        3: "#009FC0",
        4: "#00BFD9",
        5: "#00DFFF",
      }
    }
  }
}

Hex values

Color 1#005F7F

Color 2#007FA0

Color 3#009FC0

Color 4#00BFD9

Color 5#00DFFF

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

3.2:1AA18

4.4:1AA18

1.5:1Fail

2.1:1Fail

2.9:1Fail

2.3:1Fail

1.5:1Fail

1.4:1Fail

1.9:1Fail

3.2:1AA18

2.1:1Fail

1.4:1Fail

4.4:1AA18

2.9:1Fail

1.9:1Fail

1.4:1Fail

Similar palettes

More like Aqua Ocean Dream

Aqua Ocean Dream

See it in context.

Ready when you are.

Built with Aqua Ocean Dream.

How to use Aqua Ocean Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ocean Depths

Aqua Gradient

Dreamy Shimmer

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Aqua Ocean Dream