Palette

Coastal Seaglass Gems

Reflecting the soft, worn beauty of sea glass treasures found in tranquil tide pools.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Seaglass Gems 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 Coastal Seaglass Gems.

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

Data visualization

#A2D9CE#7CCACA#5CB3CC#4A7CA6#2F4F4F

Palette guide

How to use Coastal Seaglass Gems

Overview

The Coastal Seaglass Gems palette is a captivating collection of cool, aquatic blues and greens, reminiscent of polished treasures found along the shore. Starting with the soft #A2D9CE, it transitions through the vibrant #7CCACA and #5CB3CC, deepening into the serene #4A7CA6, and grounding with the profound #2F4F4F. This palette offers a harmonious blend of refreshing and deep tones, perfect for designers aiming to evoke clarity, tranquility, and a touch of understated elegance. It's particularly well-suited for projects that require a sophisticated yet natural feel, reflecting the calm beauty of the ocean.

Best used for

Jewelry and accessory branding
Luxury spa and wellness websites
Aquatic-themed home decor
Environmental awareness campaigns
Modern art and gallery presentations
Digital interfaces for calm-focused apps

Suggested color roles

primary

Utilize #5CB3CC as a dominant, inviting blue for main sections or branding elements.

secondary

Employ #7CCACA for secondary content blocks, navigation, or interactive elements, adding vibrancy.

accent

Introduce #A2D9CE as a bright, refreshing accent for highlights, icons, or subtle decorative touches.

background

Choose #A2D9CE for a light, airy background, or #7CCACA for a slightly more saturated base.

text

Use #2F4F4F or #4A7CA6 for body text and headings for excellent readability against lighter palette colors.

Accessibility notes

The dark #2F4F4F provides excellent contrast for text on all lighter colors in the palette, including #A2D9CE and #7CCACA.
Ensure sufficient contrast when using #A2D9CE for text on any background, as it is very light.
Avoid using #7CCACA for text on #5CB3CC backgrounds; opt for a darker or lighter contrasting color.
Check contrast ratios for all text pairings, especially when using mid-tones together for primary content.

Recommended combinations

Ocean Depths

Create a sophisticated, deep-to-light gradient for headers, main content, and bright accents in web design.

#2F4F4F · #4A7CA6 · #A2D9CE

Seafoam Shimmer

Ideal for dynamic elements, combining vibrant aqua with a deeper blue and a strong, grounding text color.

#7CCACA · #5CB3CC · #2F4F4F

Coastal Clarity

Use for a fresh, clean look with a light background, a deep accent, and a vibrant mid-tone for secondary elements.

#A2D9CE · #4A7CA6 · #7CCACA

CSS variables

:root {
  --coastal-seaglass-gems-1: #A2D9CE;
  --coastal-seaglass-gems-2: #7CCACA;
  --coastal-seaglass-gems-3: #5CB3CC;
  --coastal-seaglass-gems-4: #4A7CA6;
  --coastal-seaglass-gems-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-seaglass-gems": {
        1: "#A2D9CE",
        2: "#7CCACA",
        3: "#5CB3CC",
        4: "#4A7CA6",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#A2D9CE

Color 2#7CCACA

Color 3#5CB3CC

Color 4#4A7CA6

Color 5#2F4F4F

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

2.8:1Fail

5.7:1AA

1.2:1Fail

1.3:1Fail

2.4:1Fail

4.7:1AA

1.5:1Fail

1.3:1Fail

1.9:1Fail

3.7:1AA18

2.8:1Fail

2.4:1Fail

1.9:1Fail

2:1Fail

5.7:1AA

4.7:1AA

3.7:1AA18

2:1Fail

Similar palettes

More like Coastal Seaglass Gems

View all cool

Azure Lagoon Drift

Coastal Fog Drift

Coastal Serenity Shores

Misty Lakeside Dawn

Ocean Foam Serene

Ocean Glass Shard