Palette

Sea Glass Collection

Soft, frosted blues and greens, evoking the gentle hues of sea glass polished by ocean waves.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#B0E0E6#AFEEEE#8FBC8F#DCDCDC

Palette guide

How to use Sea Glass Collection

Overview

The 'Sea Glass Collection' palette (ID: sea-glass-collection-2) brings a serene and gentle aesthetic, reminiscent of ocean-tumbled treasures. Featuring soft, frosted blues like #ADD8E6 and #B0E0E6, a delicate green #8FBC8F, and a calming neutral grey #DCDCDC, this collection is perfect for conveying tranquility and natural elegance. Developers and designers can utilize these hues to build soothing interfaces, create welcoming brand identities, or design content that evokes a sense of peace and subtle sophistication. The light aqua #AFEEEE adds a touch of ethereal brightness, enhancing the overall calm.

Best used for

Wellness and spa branding
Eco-friendly product packaging
Children's educational apps or toys
Tranquil meditation and relaxation interfaces
Coastal-themed interior design mockups
Soft, inviting web design for lifestyle blogs

Suggested color roles

primary

Use #ADD8E6 as a dominant, calming primary color for backgrounds or large UI sections, setting a gentle mood.

secondary

Incorporate #8FBC8F for supportive elements, subheadings, or accent graphics, providing a natural, harmonious contrast.

accent

Apply #AFEEEE for subtle highlights, interactive states, or delicate icons, adding a touch of ethereal shimmer.

background

Utilize #DCDCDC as a clean, neutral background, offering a soft canvas that allows other colors to gently pop.

text

For optimal readability, use a dark charcoal or a deep navy (not in palette, e.g., #333333) 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 #DCDCDC or #ADD8E6.
Avoid using light pastel colors for small text elements; reserve them for larger titles or graphical accents.
Check contrast ratios for interactive components, especially when using #AFEEEE or #B0E0E6 for active states.
Consider increasing font size or weight when placing text with mid-range colors like #ADD8E6 on a #DCDCDC background.

Recommended combinations

Calm Foundation

A light grey background with a soft blue main element and a gentle green accent for a serene visual.

#DCDCDC · #ADD8E6 · #8FBC8F

Frosted Harmony

Ideal for subtle gradients or layered elements, creating depth with closely related frosted blue tones.

#B0E0E6 · #AFEEEE · #ADD8E6

Gentle Contrast

Use the green as a primary content area, grey for background, and light blue for secondary information or details.

#8FBC8F · #DCDCDC · #B0E0E6

CSS variables

:root {
  --sea-glass-collection-2-1: #ADD8E6;
  --sea-glass-collection-2-2: #B0E0E6;
  --sea-glass-collection-2-3: #AFEEEE;
  --sea-glass-collection-2-4: #8FBC8F;
  --sea-glass-collection-2-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sea-glass-collection-2": {
        1: "#ADD8E6",
        2: "#B0E0E6",
        3: "#AFEEEE",
        4: "#8FBC8F",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#B0E0E6

Color 3#AFEEEE

Color 4#8FBC8F

Color 5#DCDCDC

Accessibility

Contrast checker

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1.5:1Fail

1:1Fail

1.2:1Fail

1.1:1Fail

1.7:1Fail

1.1:1Fail

1.4:1Fail

1.5:1Fail

1.7:1Fail

1.6:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1.6:1Fail

Similar palettes

More like Sea Glass Collection

Sea Glass Collection

See it in context.

Ready when you are.

Built with Sea Glass Collection.

How to use Sea Glass Collection

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Calm Foundation

Frosted Harmony

Gentle Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sea Glass Collection