Back to palettes

Palette

Azure Coastline

Refreshing and crisp, mirroring the clear, vibrant waters and breezes of a serene coastline.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Coastline 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 Azure Coastline.

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

Data visualization

#008080#40E0D0#20B2AA#5F9EA0#AFEEEE

Palette guide

How to use Azure Coastline

Overview

The Azure Coastline palette is a refreshing and crisp collection, mirroring the clear, vibrant waters and breezes of a serene coastline. It spans from the deep, rich teal of #008080, through the balanced aquas of #20B2AA and #5F9EA0, to the bright, energetic #40E0D0 and the almost ethereal #AFEEEE. Designers and developers will find these hues excellent for creating dynamic yet calming digital experiences. This palette's inherent freshness and natural elegance make it highly versatile for projects aiming to convey vitality, serenity, or a strong connection to water and nature.

Best used for

  • Eco-friendly product branding
  • Health and wellness applications
  • Marine conservation websites
  • Spa and resort marketing
  • Modern, clean UI designs
  • Outdoor adventure tourism

Suggested color roles

primary

#008080 offers a deep, authoritative primary color, ideal for strong branding, key navigation, or important headers.

secondary

#20B2AA provides a stable, balanced secondary, suitable for subheadings, content sections, or supportive graphics.

accent

#40E0D0 delivers a vibrant, inviting accent, perfect for calls to action, interactive elements, or eye-catching details.

background

#AFEEEE creates a light, airy, almost translucent backdrop, enhancing content clarity and maintaining a fresh feel.

text

Use #008080 or a deep charcoal for body text on #AFEEEE or #40E0D0 backgrounds for excellent readability.

Accessibility notes

  • Ensure #008080 text on #AFEEEE backgrounds meets WCAG AA contrast standards.
  • Avoid using #AFEEEE for small text on any other palette color due to insufficient contrast.
  • Use #008080 or #20B2AA for critical interactive elements to ensure clear visibility.
  • For large text, #5F9EA0 on #AFEEEE can work, but verify contrast ratios carefully.

Recommended combinations

Deep Teal Flow

Creates a beautiful gradient from deep teal to vibrant aqua, ideal for immersive backgrounds.

#008080 · #20B2AA · #40E0D0

Fresh Breeze UI

Perfect for clean, modern interfaces, using the lightest for backgrounds and deeper for interactive elements.

#AFEEEE · #40E0D0 · #008080

Coastal Energy

A harmonious trio for a soft yet engaging look, suitable for informational sections or visual hierarchy.

#AFEEEE · #5F9EA0 · #20B2AA

CSS variables

:root {
  --azure-coastline-1: #008080;
  --azure-coastline-2: #40E0D0;
  --azure-coastline-3: #20B2AA;
  --azure-coastline-4: #5F9EA0;
  --azure-coastline-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-coastline": {
        1: "#008080",
        2: "#40E0D0",
        3: "#20B2AA",
        4: "#5F9EA0",
        5: "#AFEEEE",
      }
    }
  }
}

Related searches

teal blue color schemevibrant aqua paletteserene coastline colorsfresh teal web designoceanic green blue branding

Palette colors

Hex values

Color 1#008080
·
Color 2#40E0D0
·
Color 3#20B2AA
·
Color 4#5F9EA0
·
Color 5#AFEEEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.9:1Fail
1.8:1Fail
1.6:1Fail
3.7:1AA18
2
2.9:1Fail
1.6:1Fail
1.9:1Fail
1.3:1Fail
3
1.8:1Fail
1.6:1Fail
1.2:1Fail
2:1Fail
4
1.6:1Fail
1.9:1Fail
1.2:1Fail
2.4:1Fail
5
3.7:1AA18
1.3:1Fail
2:1Fail
2.4:1Fail

Similar palettes

More like Azure Coastline

View all cool
Deep Sea Coral
Sapphire Reef Wonders
Azure Coast Relic
Celestial Ocean Mirror
Coastal Rockpool
Emerald Coast Sparkle