Back to palettes

Palette

Coastal Reef Ripple

A refreshing palette of teals and aquas, reminiscent of clear ocean waves and serene shallows.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008B8B#20B2AA#48D1CC#66CDAA#7FFFD4

Palette guide

How to use Coastal Reef Ripple

Overview

The Coastal Reef Ripple palette is a dynamic collection of refreshing teals and aquas, reminiscent of clear ocean waves and serene shallows. Ranging from the vibrant #7FFFD4 to the deep #008B8B, with lively mid-tones like #66CDAA, #48D1CC, and #20B2AA. 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, marine-themed branding, and immersive digital experiences that evoke clarity, vitality, and the beauty of moving water.

Best used for

  • Beachwear and swimwear brands
  • Marine biology and conservation websites
  • Eco-friendly and sustainable products
  • Invigorating websites and digital campaigns
  • Dynamic presentations and infographics
  • Ocean-themed art and illustration

Suggested color roles

primary

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

secondary

Employ #20B2AA 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, #7FFFD4, is ideal for expansive backgrounds, offering a clean, airy, and invigorating canvas.

text

For optimal readability on lighter backgrounds, use #008B8B or a deep green-blue like #005F5F to ensure clear text presentation.

Accessibility notes

  • Ensure #008B8B text has excellent contrast against #7FFFD4 or #66CDAA backgrounds.
  • Avoid using #66CDAA or #7FFFD4 for small text on light backgrounds due to very low contrast.
  • Verify #20B2AA text contrast on #7FFFD4; it should be sufficient but always check WCAG.
  • Always test all text and interactive elements with a WCAG contrast checker for compliance.

Recommended combinations

Ripple Effect

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

#7FFFD4 · #66CDAA · #48D1CC

Deep Ocean

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

#008B8B · #20B2AA · #48D1CC

Fresh Energy

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

#7FFFD4 · #008B8B · #20B2AA

CSS variables

:root {
  --coastal-reef-ripple-1: #008B8B;
  --coastal-reef-ripple-2: #20B2AA;
  --coastal-reef-ripple-3: #48D1CC;
  --coastal-reef-ripple-4: #66CDAA;
  --coastal-reef-ripple-5: #7FFFD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-reef-ripple": {
        1: "#008B8B",
        2: "#20B2AA",
        3: "#48D1CC",
        4: "#66CDAA",
        5: "#7FFFD4",
      }
    }
  }
}

Related searches

reef ripple palettefresh aqua tealvibrant ocean colorslively coastal schemedynamic blue green

Palette colors

Hex values

Color 1#008B8B
·
Color 2#20B2AA
·
Color 3#48D1CC
·
Color 4#66CDAA
·
Color 5#7FFFD4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
2.1:1Fail
3.4:1AA18
2
1.6:1Fail
1.4:1Fail
1.4:1Fail
2.1:1Fail
3
2.2:1Fail
1.4:1Fail
1:1Fail
1.5:1Fail
4
2.1:1Fail
1.4:1Fail
1:1Fail
1.6:1Fail
5
3.4:1AA18
2.1:1Fail
1.5:1Fail
1.6:1Fail

Similar palettes

More like Coastal Reef Ripple

View all cool
Aqua Seafoam Dream
Mystic Tide Pool
Aqua Ocean Tide
Coastal Reef Haven
Monsoon Lagoon Shimmer
Oceanic Teal Depths