Back to palettes

Palette

Coastal Sea Glass

Soft, muted shades reminiscent of weathered sea glass found on a tranquil ocean shore.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Sea Glass 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 Sea Glass.

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

Data visualization

#A8DADC#6DAB97#F1DCC9#D2BFD8#80CED7

Palette guide

How to use Coastal Sea Glass

Overview

The Coastal Sea Glass palette is a delicate collection of muted pastels, reminiscent of ocean-smoothed glass. Featuring the soft aqua of #A8DADC, a gentle seafoam green #6DAB97, and the serene coral of #F1DCC9, this palette evokes tranquility and refined elegance. The unique lilac hint of #D2BFD8 adds an unexpected, sophisticated twist, while #80CED7 provides a brighter, more vibrant blue. This palette is perfect for designers aiming to create soft, airy, and slightly whimsical designs with a calming, natural feel, ideal for projects seeking a gentle yet distinctive aesthetic.

Best used for

  • Boutique apparel branding
  • Children's nurseries or toy design
  • Wedding and event decor
  • Watercolor art and illustration
  • Personal blogs and portfolios
  • Spa or meditation app interfaces

Suggested color roles

primary

Use #A8DADC or #80CED7 as a fresh, dominant blue for large backgrounds or primary UI elements.

secondary

Apply #6DAB97 for secondary blocks, navigation, or subtle graphic elements to add a touch of green.

accent

Introduce #F1DCC9 for highlights, call-to-action buttons, or decorative details to bring warmth.

background

Choose #F1DCC9 for a soft, warm background, or #A8DADC for a cooler, expansive canvas.

text

For readability, use a dark gray or charcoal text. For lighter text, ensure sufficient contrast on deeper palette colors like #6DAB97 or #80CED7.

Accessibility notes

  • Most colors in this palette are light; ensure text has sufficient contrast, especially on #F1DCC9.
  • Pair #6DAB97 or #80CED7 with dark text for good readability.
  • Avoid using #A8DADC or #D2BFD8 as text on light backgrounds like #F1DCC9.
  • Consider using a dark charcoal or black for body text to meet accessibility standards across the board.

Recommended combinations

Ocean Whisper

Create a soft, inviting look for websites, with a cool background, warm accents, and subtle green details.

#A8DADC · #F1DCC9 · #6DAB97

Sea Glass Gems

Use for playful yet sophisticated branding, combining a brighter blue with lilac and a calming green.

#80CED7 · #D2BFD8 · #6DAB97

Muted Shore

Ideal for soft, dreamy backgrounds with gentle blue and lilac overlays, perfect for artistic projects.

#F1DCC9 · #A8DADC · #D2BFD8

CSS variables

:root {
  --coastal-sea-glass-1: #A8DADC;
  --coastal-sea-glass-2: #6DAB97;
  --coastal-sea-glass-3: #F1DCC9;
  --coastal-sea-glass-4: #D2BFD8;
  --coastal-sea-glass-5: #80CED7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-sea-glass": {
        1: "#A8DADC",
        2: "#6DAB97",
        3: "#F1DCC9",
        4: "#D2BFD8",
        5: "#80CED7",
      }
    }
  }
}

Related searches

pastel coastal color palettesea glass inspired colorssoft aqua and coral palettemuted beach tonesgentle design colors

Palette colors

Hex values

Color 1#A8DADC
·
Color 2#6DAB97
·
Color 3#F1DCC9
·
Color 4#D2BFD8
·
Color 5#80CED7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.2:1Fail
1.1:1Fail
1.2:1Fail
2
1.7:1Fail
2:1Fail
1.5:1Fail
1.5:1Fail
3
1.2:1Fail
2:1Fail
1.3:1Fail
1.3:1Fail
4
1.1:1Fail
1.5:1Fail
1.3:1Fail
1:1Fail
5
1.2:1Fail
1.5:1Fail
1.3:1Fail
1:1Fail

Similar palettes

More like Coastal Sea Glass

View all pastel
Pastel Beach House
Seaside Coral Garden
Aquatic Coral Dance
Cherry Blossom Whispers
Cloud Mist Whisper
Cloud Whisper Bloom