Back to palettes

Palette

Sea Glass Serenity

Soft, muted tones reminiscent of ocean-tumbled glass, smooth and serene.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A2CCB6#B9D7D9#E0FFFF#98FB98#66CDAA

Palette guide

How to use Sea Glass Serenity

Overview

The 'Sea Glass Serenity' palette captures the tranquil essence of ocean-tumbled glass with its soft, muted greens and blues. Featuring harmonious shades like the gentle #A2CCB6, the cool #B9D7D9, and the vibrant #66CDAA, this collection is ideal for designers and developers seeking to create calming, refreshing, and natural-feeling digital experiences. The very light #E0FFFF provides an ethereal background, while #98FB98 adds a fresh, subtle pop. These colors combine to evoke a sense of peace, nature, and understated elegance in any design.

Best used for

  • Yoga and meditation studio branding
  • Wellness and natural beauty product packaging
  • Eco-tourism websites and apps
  • Children's educational content with a calming feel
  • Tranquil UI/UX for lifestyle applications
  • Nature-inspired graphic design projects

Suggested color roles

primary

Use #66CDAA as a vibrant yet calming primary color for key calls-to-action, headings, or impactful content areas.

secondary

Incorporate #A2CCB6 for supportive backgrounds, card elements, or secondary information, providing a soft, harmonious green.

accent

Apply #98FB98 for bright, fresh highlights, interactive states, or delicate icons, adding a touch of natural energy.

background

Utilize #E0FFFF as the primary background color for an airy, expansive canvas, ensuring excellent readability for darker text.

text

For optimal readability, use a dark charcoal or deep green (e.g., #333333 or #2F4F4F) for text against these light pastel shades.

Accessibility notes

  • Ensure high contrast for text by using dark colors (e.g., black or charcoal) on lighter palette shades like #E0FFFF and #B9D7D9.
  • Avoid using #A2CCB6 or #B9D7D9 for small text on #E0FFFF backgrounds due to potential low contrast; reserve for larger titles.
  • Verify contrast ratios for interactive elements to meet WCAG standards, especially with mid-range greens and blues.
  • Consider increasing font size or weight when placing text with #66CDAA on a #A2CCB6 background for improved legibility.

Recommended combinations

Fresh Breeze

An airy background with a vibrant primary accent and a soft green secondary, creating a refreshing and inviting feel.

#E0FFFF · #66CDAA · #A2CCB6

Serene Layers

Ideal for layered UI components, using a cool blue-green background, a bright green for cards, and a vibrant accent.

#B9D7D9 · #98FB98 · #66CDAA

Natural Harmony

Use the soft green for a content block, the lightest shade for text, and the cool blue-green for subtle dividers or highlights.

#A2CCB6 · #E0FFFF · #B9D7D9

CSS variables

:root {
  --sea-glass-serenity-1: #A2CCB6;
  --sea-glass-serenity-2: #B9D7D9;
  --sea-glass-serenity-3: #E0FFFF;
  --sea-glass-serenity-4: #98FB98;
  --sea-glass-serenity-5: #66CDAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sea-glass-serenity": {
        1: "#A2CCB6",
        2: "#B9D7D9",
        3: "#E0FFFF",
        4: "#98FB98",
        5: "#66CDAA",
      }
    }
  }
}

Related searches

tranquil sea glass palettecalming green blueserene nature colorssoft aqua themerefreshing UI design

Palette colors

Hex values

Color 1#A2CCB6
·
Color 2#B9D7D9
·
Color 3#E0FFFF
·
Color 4#98FB98
·
Color 5#66CDAA
·

Accessibility

Contrast checker

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

Similar palettes

More like Sea Glass Serenity

View all cool
Coastal Seaglass Hues
Coastal Seaglass Gems
Mediterranean Coast Breeze
Mediterranean Sea Breeze
Minty Sea Glass
Mystic Sea Glass