Palette

Coastal Reef Haven

A refreshing blend of aquas and teals, like a tranquil, sunlit coral reef sanctuary.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Reef Haven 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 Coastal Reef Haven.

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

Data visualization

#008080#40E0D0#7FFFD4#AFEEEE#D1EEEE

Palette guide

How to use Coastal Reef Haven

Overview

The Coastal Reef Haven palette is a refreshing collection of vibrant aquas and teals, like a tranquil, sunlit coral reef sanctuary. Ranging from the ethereal #D1EEEE to the deep #008080, with lively mid-tones like #AFEEEE, #7FFFD4, and #40E0D0. This palette is perfect for designs that aim for a clean, energetic, and soothing aesthetic. Developers will find these colors excellent for crafting dynamic user interfaces, tropical branding, and immersive digital experiences that evoke clarity, vitality, and the beauty of marine life.

Best used for

Tropical resort and travel branding
Diving and marine activity centers
Summer fashion and swimwear collections
Eco-tourism and conservation websites
Vibrant digital interfaces and apps
Ocean-themed art and illustration

Suggested color roles

primary

Utilize #008080 as a vibrant, prominent deep teal for main sections, headers, or interactive elements that need to stand out.

secondary

Employ #40E0D0 for secondary information, card backgrounds, or to introduce a lively, refreshing aqua tone.

accent

Apply #7FFFD4 as a subtle accent for highlights, decorative elements, or to create gentle visual interest.

background

The lightest shade, #D1EEEE, is ideal for expansive backgrounds, offering a clean, airy, and invigorating canvas.

text

For optimal readability on lighter backgrounds, use #008080 or a deep navy like #004D4D to ensure clear text presentation.

Accessibility notes

Ensure #008080 text has sufficient contrast against #D1EEEE or #AFEEEE backgrounds.
Avoid using #AFEEEE or #D1EEEE for small text on light backgrounds due to very low contrast.
Verify #40E0D0 text contrast on #D1EEEE; it should be sufficient but always check WCAG.
Always test all text and interactive elements with a WCAG contrast checker for compliance.

Recommended combinations

Clear Reef

Excellent for layered backgrounds or subtle gradients that transition smoothly from very light to slightly richer aqua.

#D1EEEE · #AFEEEE · #7FFFD4

Ocean Depth

Create a sense of depth and hierarchy in UI elements, moving from a vibrant primary to lighter, supporting tones.

#008080 · #40E0D0 · #7FFFD4

Vibrant Pop

Use a clean background with a vibrant primary color for emphasis, balanced by a lighter supporting shade.

#D1EEEE · #008080 · #40E0D0

CSS variables

:root {
  --coastal-reef-haven-1: #008080;
  --coastal-reef-haven-2: #40E0D0;
  --coastal-reef-haven-3: #7FFFD4;
  --coastal-reef-haven-4: #AFEEEE;
  --coastal-reef-haven-5: #D1EEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-reef-haven": {
        1: "#008080",
        2: "#40E0D0",
        3: "#7FFFD4",
        4: "#AFEEEE",
        5: "#D1EEEE",
      }
    }
  }
}

Hex values

Color 1#008080

Color 2#40E0D0

Color 3#7FFFD4

Color 4#AFEEEE

Color 5#D1EEEE

Accessibility

Contrast checker

2.9:1Fail

3.9:1AA18

3.7:1AA18

3.9:1AA18

2.9:1Fail

1.3:1Fail

3.9:1AA18

1.3:1Fail

1.1:1Fail

1:1Fail

3.7:1AA18

1.3:1Fail

1.1:1Fail

3.9:1AA18

1.3:1Fail

1:1Fail

1.1:1Fail

Similar palettes

More like Coastal Reef Haven

Coastal Reef Haven

See it in context.

Ready when you are.

Built with Coastal Reef Haven.

How to use Coastal Reef Haven

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clear Reef

Ocean Depth

Vibrant Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Reef Haven