Palette

Mystic Sea Glass

A gentle blend of cool greens and blues, like polished sea glass treasures found along a tranquil shore.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8FBC8F#66CDAA#AFEEEE#7FFFD4#48D1CC

Palette guide

How to use Mystic Sea Glass

Overview

The "Mystic Sea Glass" palette is a gentle and refreshing blend of cool greens and blues, reminiscent of polished treasures found along a tranquil shore. Featuring harmonious shades like the soft `#8FBC8F`, the bright `#7FFFD4`, and the vibrant `#48D1CC`, this palette evokes calm, natural beauty. Designers can leverage these serene hues to create inviting and soothing interfaces, perfect for themes related to wellness, nature, or eco-friendliness. Its airy and light quality makes it highly versatile for backgrounds, accents, and primary content, promoting a sense of peace and clarity in any design.

Best used for

Eco-friendly brand identities and packaging
Spa and wellness retreat websites or apps
Nature photography portfolios and blogs
Children's educational apps and products
Health and mental well-being applications
Serene and minimalist user interfaces

Suggested color roles

primary

Use `#66CDAA` as a primary color for calls-to-action or main headings, offering a fresh and inviting focal point.

secondary

Employ `#8FBC8F` for supportive content, subheadings, or background sections, providing a gentle, natural complement.

accent

Apply `#AFEEEE` or `#7FFFD4` for delicate highlights, interactive elements, or subtle graphic accents, creating an airy, luminous touch.

background

A light and airy tone like `#7FFFD4` or `#AFEEEE` makes an excellent background, promoting a clean, open feel.

text

For lighter backgrounds, a dark charcoal or black text is ideal. For headings or larger text, `#48D1CC` can provide a vibrant yet readable option.

Accessibility notes

Ensure sufficient contrast for dark text on light backgrounds like `#AFEEEE` or `#7FFFD4` to meet WCAG AA standards.
When using `#48D1CC` for text, confirm it has enough contrast against its background, especially if the background is also a light cool tone.
Interactive elements should have clearly discernible states; for example, a button in `#66CDAA` could lighten to `#7FFFD4` on hover.
Avoid using `#8FBC8F` and `#66CDAA` for text/background combinations, as their subtle difference in lightness might hinder readability.

Recommended combinations

Tranquil Base

Use `#7FFFD4` as a light background, `#48D1CC` for headings or key elements, and `#8FBC8F` for secondary text or dividers.

#7FFFD4 · #48D1CC · #8FBC8F

Fresh Accents

Apply `#66CDAA` for card backgrounds, `#AFEEEE` for delicate icons or accents, and `#8FBC8F` for supporting text.

#66CDAA · #AFEEEE · #8FBC8F

Ocean Glow

Create a luminous header with `#AFEEEE` as the background, `#48D1CC` for the title, and `#66CDAA` for a subtle border.

#AFEEEE · #48D1CC · #66CDAA

CSS variables

:root {
  --mystic-sea-glass-1: #8FBC8F;
  --mystic-sea-glass-2: #66CDAA;
  --mystic-sea-glass-3: #AFEEEE;
  --mystic-sea-glass-4: #7FFFD4;
  --mystic-sea-glass-5: #48D1CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-sea-glass": {
        1: "#8FBC8F",
        2: "#66CDAA",
        3: "#AFEEEE",
        4: "#7FFFD4",
        5: "#48D1CC",
      }
    }
  }
}

Hex values

Color 1#8FBC8F

Color 2#66CDAA

Color 3#AFEEEE

Color 4#7FFFD4

Color 5#48D1CC

Accessibility

Contrast checker

1.1:1Fail

1.7:1Fail

1.8:1Fail

1.2:1Fail

1.1:1Fail

1.5:1Fail

1.6:1Fail

1:1Fail

1.7:1Fail

1.5:1Fail

1.1:1Fail

1.4:1Fail

1.8:1Fail

1.6:1Fail

1.1:1Fail

1.5:1Fail

1.2:1Fail

1:1Fail

1.4:1Fail

1.5:1Fail

Similar palettes

More like Mystic Sea Glass

Mystic Sea Glass

See it in context.

Ready when you are.

Built with Mystic Sea Glass.

How to use Mystic Sea Glass

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Tranquil Base

Fresh Accents

Ocean Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mystic Sea Glass