Back to palettes

Palette

Opaline Sea Glaze

Soft, pearlescent blues and greens mimicking the iridescent shimmer on a tranquil sea surface.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Opaline Sea Glaze 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 Opaline Sea Glaze.

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

Data visualization

#8EDCE6#C1E1E6#D4EDF1#EDF7F8#60ADB8

Palette guide

How to use Opaline Sea Glaze

Overview

The Opaline Sea Glaze palette captures the soft, pearlescent blues and greens mimicking the iridescent shimmer on a tranquil sea surface. With serene shades like #8EDCE6, #C1E1E6, #D4EDF1, #EDF7F8, and #60ADB8, this collection is perfect for designers and developers aiming to create calm, delicate, and refreshing digital experiences. Its aquatic tones are ideal for coastal themes, wellness brands, and content that requires a serene, airy, and inviting aesthetic, ensuring a peaceful and harmonious visual impact.

Best used for

  • Coastal-themed brands and websites
  • Spa and wellness centers
  • Marine conservation organizations
  • Children's room decor and products
  • Summer resort marketing
  • Aquatic product packaging

Suggested color roles

primary

#8EDCE6 (a soft, clear aqua) is ideal for main headings, brand accents, or prominent graphical elements, conveying freshness.

secondary

#C1E1E6 (a light, muted blue) works well for sub-sections, navigation, or secondary text, providing gentle visual separation.

accent

#60ADB8 (a deeper, serene teal) can be used for important calls to action, interactive elements, or subtle borders, adding a touch of depth.

background

#EDF7F8 or #D4EDF1 (airy, near-white blue tones) creates light, expansive backdrops, perfect for a clean and refreshing feel.

text

#60ADB8 provides good contrast for dark text on light backgrounds like #EDF7F8, or opt for a dark blue/charcoal for optimal readability.

Accessibility notes

  • Ensure #60ADB8 text on #EDF7F8 background meets WCAG AA contrast standards for readability.
  • Lighter colors like #8EDCE6 or #C1E1E6 may not be suitable for small text on very light backgrounds due to insufficient contrast.
  • Use the darkest shade, #60ADB8, for critical text and interactive elements to ensure clarity.
  • Avoid pairing very light colors for both text and background to prevent readability issues and improve user experience.

Recommended combinations

Tranquil Waters

Creates a gentle, expansive, and serene background for web pages, evoking a calm aquatic environment.

#EDF7F8 · #D4EDF1 · #C1E1E6

Sea Depth

For highlighting key elements, calls to action, or feature blocks with a cool, vibrant touch.

#8EDCE6 · #60ADB8 · #EDF7F8

Iridescent Layer

Ideal for card backgrounds, subtle UI distinctions, or layered graphical elements.

#C1E1E6 · #D4EDF1 · #60ADB8

CSS variables

:root {
  --opaline-sea-glaze-1: #8EDCE6;
  --opaline-sea-glaze-2: #C1E1E6;
  --opaline-sea-glaze-3: #D4EDF1;
  --opaline-sea-glaze-4: #EDF7F8;
  --opaline-sea-glaze-5: #60ADB8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "opaline-sea-glaze": {
        1: "#8EDCE6",
        2: "#C1E1E6",
        3: "#D4EDF1",
        4: "#EDF7F8",
        5: "#60ADB8",
      }
    }
  }
}

Related searches

serene sea blue palettepastel aqua colorstranquil ocean themeiridescent water huescalming light blue green

Palette colors

Hex values

Color 1#8EDCE6
·
Color 2#C1E1E6
·
Color 3#D4EDF1
·
Color 4#EDF7F8
·
Color 5#60ADB8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.4:1Fail
1.7:1Fail
2
1.1:1Fail
1.1:1Fail
1.3:1Fail
1.9:1Fail
3
1.3:1Fail
1.1:1Fail
1.1:1Fail
2.1:1Fail
4
1.4:1Fail
1.3:1Fail
1.1:1Fail
2.4:1Fail
5
1.7:1Fail
1.9:1Fail
2.1:1Fail
2.4:1Fail

Similar palettes

More like Opaline Sea Glaze

View all pastel