Back to palettes

Palette

Seascape Mists

Muted blues and greens that echo the serene and often mysterious blend of sea and sky on a foggy day.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seascape Mists 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 Seascape Mists.

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

Data visualization

#B9D2D9#82B0BF#4C8FA3#2B6777#1A4956

Palette guide

How to use Seascape Mists

Overview

The Seascape Mists palette offers a deep, tranquil, and cool collection of blues and greens, perfectly echoing the serene and mysterious blend of sea and sky on a foggy day. Featuring the airy #B9D2D9, a balanced #4C8FA3, and the profound #1A4956, this palette is ideal for designs that require sophistication, depth, and an atmospheric quality. Designers and developers can leverage these versatile hues to create immersive user interfaces, compelling branding for marine-related ventures, or elegant digital experiences that evoke the vastness and calm of the ocean.

Best used for

  • Marine conservation and research websites
  • Deep-sea exploration or documentary branding
  • Sophisticated web design for luxury brands
  • Tranquil spa and wellness environments
  • Atmospheric art and photography portfolios
  • Cool-toned corporate identity

Suggested color roles

primary

Use #4C8FA3 as a balanced core brand color for headings, primary buttons, or significant graphic elements, conveying depth and reliability.

secondary

Employ #82B0BF for lighter, supporting blue-green elements, background sections, or secondary navigation, adding a touch of airiness.

accent

Apply #1A4956 as the deepest, grounding accent for strong calls to action, important icons, or interactive states, providing powerful emphasis.

background

Utilize #B9D2D9 as a light, misty base for pages or content blocks, ensuring ample whitespace and a serene, open feel.

text

For optimal legibility, #1A4956 serves as the darkest and most effective text color against the lighter backgrounds, ensuring content is easily digestible.

Accessibility notes

  • The combination of #1A4956 (text) on #B9D2D9 (background) offers excellent contrast for primary text readability, meeting WCAG AA standards.
  • Avoid using #B9D2D9 for text, as it lacks sufficient contrast on most backgrounds; reserve it for backgrounds or large decorative elements.
  • Ensure #4C8FA3 or #82B0BF used as text on #B9D2D9 passes WCAG AA contrast requirements for smaller font sizes.
  • For dark backgrounds, use light text (like white or #B9D2D9) to ensure readability and maintain accessibility standards.

Recommended combinations

Misty Layers

Ideal for creating light backgrounds, layered elements, and subtle branding components that evoke a sense of depth and tranquility.

#B9D2D9 · #82B0BF · #4C8FA3

Deep Ocean

Excellent for headers, main content blocks, and strong calls to action, providing a profound and authoritative presence.

#4C8FA3 · #2B6777 · #1A4956

Contrast Pop

Creates a clean background, highlights main text with a deep blue-green, and provides powerful accents for interactive elements.

#B9D2D9 · #2B6777 · #1A4956

CSS variables

:root {
  --seascape-mists-1: #B9D2D9;
  --seascape-mists-2: #82B0BF;
  --seascape-mists-3: #4C8FA3;
  --seascape-mists-4: #2B6777;
  --seascape-mists-5: #1A4956;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seascape-mists": {
        1: "#B9D2D9",
        2: "#82B0BF",
        3: "#4C8FA3",
        4: "#2B6777",
        5: "#1A4956",
      }
    }
  }
}

Related searches

tranquil blue green palettedeep sea colorsmisty ocean schemecool atmospheric designmarine inspired branding

Palette colors

Hex values

Color 1#B9D2D9
·
Color 2#82B0BF
·
Color 3#4C8FA3
·
Color 4#2B6777
·
Color 5#1A4956
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
4:1AA18
6.2:1AA
2
1.5:1Fail
1.5:1Fail
2.7:1Fail
4.2:1AA18
3
2.3:1Fail
1.5:1Fail
1.7:1Fail
2.7:1Fail
4
4:1AA18
2.7:1Fail
1.7:1Fail
1.6:1Fail
5
6.2:1AA
4.2:1AA18
2.7:1Fail
1.6:1Fail

Similar palettes

More like Seascape Mists

View all cool
Aqua Ocean Dream
Azure Lagoon Drift
Azure Reef Shimmer
Azure Tide Pool
Cerulean Horizon Dive
Coastal Cliff Retreat