Back to palettes

Palette

Sea Glass

Translucent blues and greens, reminiscent of weathered sea glass tumbled by endless ocean waves.

pastelminimal5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0FFFF#AFEEEE#7FFFD4#40E0D0#20B2AA

Palette guide

How to use Sea Glass

Overview

The 'Sea Glass' palette (ID: sea-glass) presents a vibrant yet serene collection of translucent blues and greens, reminiscent of ocean-weathered glass. This palette transitions beautifully from the ethereal #E0FFFF to the deep, impactful #20B2AA, offering a versatile range for designers and developers. Shades like #AFEEEE, #7FFFD4, and #40E0D0 provide a gradient of refreshing aqua and teal, perfect for creating dynamic yet calming digital experiences. Utilize these colors to build engaging interfaces, highlight key information, and maintain a cohesive, cool-toned aesthetic.

Best used for

  • Ocean-themed branding and marketing
  • Environmental non-profit websites and apps
  • Modern tech and software interfaces
  • Athletic wear and active lifestyle branding
  • Clean product design and packaging
  • Refreshing digital content and illustrations

Suggested color roles

primary

Use #20B2AA as a deep, impactful primary color for strong headings, calls-to-action, or foundational UI elements.

secondary

Apply #40E0D0 for supportive content, subheadings, or vibrant graphics, offering an energetic yet harmonious aqua.

accent

Incorporate #7FFFD4 for bright, energetic highlights, interactive states, or delicate icons, adding a fresh sparkle.

background

Utilize #E0FFFF as the primary background color for a clean, ethereal canvas, ensuring excellent readability for darker text.

text

For body text, #20B2AA provides optimal contrast against #E0FFFF and other lighter shades, ensuring clear readability.

Accessibility notes

  • Ensure sufficient contrast when using lighter aqua shades like #7FFFD4 on #E0FFFF backgrounds; reserve for larger text or accents.
  • The deep #20B2AA provides excellent contrast for text on #E0FFFF and #AFEEEE backgrounds.
  • Verify contrast ratios for interactive elements to meet WCAG standards, especially with mid-range aqua and teal colors.
  • Consider using a bold font weight for text in #40E0D0 when placed on an #AFEEEE background for improved readability.

Recommended combinations

Ocean Depths

An ethereal background with a deep teal primary and a vibrant aqua secondary, creating a dynamic yet calm visual.

#E0FFFF · #20B2AA · #40E0D0

Aqua Gradient

Ideal for subtle gradients or layered elements, moving from a light aqua background to brighter, more saturated accents.

#AFEEEE · #7FFFD4 · #40E0D0

Refreshing UI

Use the deep teal for key content blocks, the lightest shade for text, and the light aqua for subtle interactive elements.

#20B2AA · #E0FFFF · #AFEEEE

CSS variables

:root {
  --sea-glass-1: #E0FFFF;
  --sea-glass-2: #AFEEEE;
  --sea-glass-3: #7FFFD4;
  --sea-glass-4: #40E0D0;
  --sea-glass-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sea-glass": {
        1: "#E0FFFF",
        2: "#AFEEEE",
        3: "#7FFFD4",
        4: "#40E0D0",
        5: "#20B2AA",
      }
    }
  }
}

Related searches

vibrant sea glass paletteaqua green colorsmodern ocean themerefreshing UI designcool teal scheme

Palette colors

Hex values

Color 1#E0FFFF
·
Color 2#AFEEEE
·
Color 3#7FFFD4
·
Color 4#40E0D0
·
Color 5#20B2AA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.2:1Fail
1.6:1Fail
2.5:1Fail
2
1.2:1Fail
1.1:1Fail
1.3:1Fail
2:1Fail
3
1.2:1Fail
1.1:1Fail
1.3:1Fail
2.1:1Fail
4
1.6:1Fail
1.3:1Fail
1.3:1Fail
1.6:1Fail
5
2.5:1Fail
2:1Fail
2.1:1Fail
1.6:1Fail

Similar palettes

More like Sea Glass

View all pastel
Minimalist Aqua Tint
Porcelain Ocean Sands
Chiffon Cloud Dance
Delicate Sugar Coating
Desert Bloom Pastel
Desert Rose Mirage