Back to palettes

Palette

Seagrass Coastal Calm

Soft greens and muted blues, capturing the hazy tranquility of seagrass meeting coastal fog.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seagrass Coastal Calm 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 Seagrass Coastal Calm.

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

Data visualization

#6B8E23#A2B28B#8FBC8F#B0C4DE#87CEEB

Palette guide

How to use Seagrass Coastal Calm

Overview

The Seagrass Coastal Calm palette delivers a naturally soothing and harmonious feel, drawing inspiration from verdant seagrass and misty coastal air. This collection masterfully blends earthy greens like #6B8E23 and #A2B28B with serene blues such as #B0C4DE and #87CEEB. It's an excellent choice for projects aiming to convey organic authenticity, tranquility, or a connection to nature. Designers and developers will find these hues ideal for creating inviting digital experiences, sustainable brand identities, or calming physical spaces, leveraging the palette's inherent balance between warmth and coolness.

Best used for

  • Eco-tourism and travel websites
  • Nature and outdoor activity apps
  • Wellness and organic product branding
  • Home decor and textile designs
  • Educational content on environmental themes
  • Serene digital interfaces

Suggested color roles

primary

Utilize #6B8E23 as a strong, natural anchor for branding, main headers, or key graphical elements, conveying vitality and growth.

secondary

Employ #A2B28B for softer supporting elements, background sections, or secondary navigation, maintaining an organic feel.

accent

Apply #87CEEB for fresh, airy highlights, interactive buttons, or subtle calls to action, adding a touch of clarity and openness.

background

Use #B0C4DE as a muted blue backdrop, creating a serene and spacious feel for web pages or larger design areas.

text

For clear legibility, use a dark gray like #444444 or a deep charcoal against the lighter backgrounds, ensuring content is easily digestible.

Accessibility notes

  • Ensure #6B8E23 (primary) on #A2B28B (secondary) background meets WCAG contrast standards if used for text or important elements.
  • Lighter blues like #B0C4DE need sufficiently dark text for readability; avoid using other light colors for text on this background.
  • Color blind users might find distinguishing between #A2B28B and #8FBC8F challenging if used adjacent for critical information without other cues.
  • Test #87CEEB as a text color; it will likely be too light on most backgrounds and best reserved for larger accents or graphical elements.

Recommended combinations

Earthy Greens

Excellent for natural branding, large content blocks, or illustrations emphasizing organic textures and growth.

#6B8E23 · #A2B28B · #8FBC8F

Sky & Grass

Creates a balanced composition for headers, main backgrounds, and contrasting key actions, evoking open landscapes.

#B0C4DE · #87CEEB · #6B8E23

Muted Harmony

Suitable for subtle UI elements, supporting graphics, or decorative accents where a soft, blended look is desired.

#A2B28B · #B0C4DE · #87CEEB

CSS variables

:root {
  --seagrass-coastal-calm-1: #6B8E23;
  --seagrass-coastal-calm-2: #A2B28B;
  --seagrass-coastal-calm-3: #8FBC8F;
  --seagrass-coastal-calm-4: #B0C4DE;
  --seagrass-coastal-calm-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seagrass-coastal-calm": {
        1: "#6B8E23",
        2: "#A2B28B",
        3: "#8FBC8F",
        4: "#B0C4DE",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

natural green blue palettecoastal nature colorsserene earth tonesseagrass inspired designmuted green and blue scheme

Palette colors

Hex values

Color 1#6B8E23
·
Color 2#A2B28B
·
Color 3#8FBC8F
·
Color 4#B0C4DE
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.8:1Fail
2.1:1Fail
2.2:1Fail
2
1.7:1Fail
1.1:1Fail
1.3:1Fail
1.3:1Fail
3
1.8:1Fail
1.1:1Fail
1.2:1Fail
1.2:1Fail
4
2.1:1Fail
1.3:1Fail
1.2:1Fail
1:1Fail
5
2.2:1Fail
1.3:1Fail
1.2:1Fail
1:1Fail

Similar palettes

More like Seagrass Coastal Calm

View all earth
Deep Forest Fern
Desert Succulent Array
Emerald Coast Moss
Enchanted Forest Canopy
Enchanted Forest Glow
Mystic Woodland Trail