Palette

Azure Coast Relic

The calming, weathered blues and greens of an ancient relic found on a serene azure coast.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1B4C4C#4A7A7A#7EC2C2#B3E0E0#408080

Palette guide

How to use Azure Coast Relic

Overview

The Azure Coast Relic palette offers a unique blend of weathered blues and greens, evoking the aged beauty of artifacts found along a serene coast. This collection moves from the deep, muted teal of #1B4C4C, through the balanced tones of #4A7A7A and #408080, to the lighter, more airy #7EC2C2 and #B3E0E0. It's a superb choice for designers and developers seeking a natural, earthy, yet sophisticated aesthetic. The palette's subdued richness creates a grounded and authentic feel, ideal for projects that value heritage, stability, or a connection to nature. Each hex code contributes to a harmonious, understated elegance.

Best used for

Sustainable brand identities
Historical or cultural institution websites
Artisan craft e-commerce
Interior design mood boards
Nature conservation organizations
Vintage-inspired digital products

Suggested color roles

primary

#1B4C4C grounds the palette, serving as a robust primary color for strong branding, large headers, or important containers.

secondary

#408080 provides a versatile mid-tone, suitable for subheadings, navigation, or secondary informational blocks.

accent

#7EC2C2 offers a brighter, inviting accent, perfect for interactive elements, highlights, or decorative borders.

background

#B3E0E0 creates a soft, breathable canvas, allowing darker content to stand out while maintaining a gentle atmosphere.

text

Use #1B4C4C or a dark grey for body text on #B3E0E0 or #7EC2C2 backgrounds for excellent readability.

Accessibility notes

Ensure #1B4C4C text on #B3E0E0 backgrounds meets WCAG AA contrast standards.
Avoid using #7EC2C2 or #B3E0E0 for small text on light backgrounds due to insufficient contrast.
Use #1B4C4C or #408080 for critical UI elements to ensure they are easily discernible.
For large text, #4A7A7A on #B3E0E0 can work, but verify contrast carefully.

Recommended combinations

Ancient Teal

Creates a deep, evolving gradient suitable for sophisticated backgrounds or data visualizations.

#1B4C4C · #4A7A7A · #7EC2C2

Coastal Whisper

Effective for light, airy layouts with a touch of grounding color for headers or accents.

#B3E0E0 · #7EC2C2 · #408080

Relic Ground

A strong, contrasting trio for clear visual hierarchy in web design or print.

#1B4C4C · #B3E0E0 · #408080

CSS variables

:root {
  --azure-coast-relic-1: #1B4C4C;
  --azure-coast-relic-2: #4A7A7A;
  --azure-coast-relic-3: #7EC2C2;
  --azure-coast-relic-4: #B3E0E0;
  --azure-coast-relic-5: #408080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-coast-relic": {
        1: "#1B4C4C",
        2: "#4A7A7A",
        3: "#7EC2C2",
        4: "#B3E0E0",
        5: "#408080",
      }
    }
  }
}

Hex values

Color 1#1B4C4C

Color 2#4A7A7A

Color 3#7EC2C2

Color 4#B3E0E0

Color 5#408080

Accessibility

Contrast checker

2:1Fail

4.8:1AA

6.7:1AA

2.1:1Fail

2:1Fail

2.4:1Fail

3.4:1AA18

1.1:1Fail

4.8:1AA

2.4:1Fail

1.4:1Fail

2.2:1Fail

6.7:1AA

3.4:1AA18

1.4:1Fail

3.2:1AA18

2.1:1Fail

1.1:1Fail

2.2:1Fail

3.2:1AA18

Similar palettes

More like Azure Coast Relic