Back to palettes

Palette

Seagrass Weave Texture

Muted greens and earthy tones, reflecting the calm, interwoven patterns of coastal seagrass.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seagrass Weave Texture 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 Weave Texture.

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

Data visualization

#5F7F6B#8AB299#BFE2C6#4C6A5A#72997E

Palette guide

How to use Seagrass Weave Texture

Overview

The Seagrass Weave Texture palette offers a rich, organic collection of muted greens and earthy tones, perfect for designs that aim to reflect natural textures and a calm, grounded aesthetic. Featuring deep #5F7F6B, a brighter #8AB299, and the lightest #BFE2C6, this palette evokes the serene, interwoven patterns of coastal seagrass. It's an excellent choice for brands and projects focused on sustainability, natural products, or creating a tranquil user experience. Designers and developers can utilize these versatile hues to build cohesive and inviting visual narratives that speak to authenticity and environmental consciousness.

Best used for

  • Sustainable and eco-friendly brand identities
  • Natural product packaging design
  • Organic food and beverage marketing
  • Rustic or earthy interior design schemes
  • Educational content on botany or nature
  • Websites promoting slow living or craftsmanship

Suggested color roles

primary

Use #5F7F6B as the deep, grounding core for branding, main headers, or significant graphical elements, conveying stability and nature.

secondary

Employ #8AB299 for softer supporting elements, background sections, or secondary navigation, maintaining an organic and approachable feel.

accent

Apply #BFE2C6 as the brightest accent for fresh highlights, interactive buttons, or subtle calls to action, adding a light, airy touch.

background

Utilize #BFE2C6 as a light, airy base for pages or content blocks, providing a clean canvas that enhances readability.

text

For optimal legibility, #4C6A5A serves as the darkest and most effective text color against the lighter backgrounds, ensuring content stands out.

Accessibility notes

  • Ensure #4C6A5A (text) on #BFE2C6 (background) provides excellent contrast for primary content readability, meeting WCAG AA standards.
  • Avoid using #8AB299 or #72997E for small text against similar mid-tones as contrast might be insufficient.
  • The lightest shade #BFE2C6 is ideal for backgrounds; always pair it with a dark text color for clear legibility.
  • Test all color combinations for sufficient contrast, especially for interactive elements like buttons and links, to ensure accessibility.

Recommended combinations

Deep Weave

Excellent for headers, main content blocks, or accent details where a rich, layered green aesthetic is desired.

#4C6A5A · #5F7F6B · #8AB299

Light & Fresh

Suitable for light backgrounds, secondary informational sections, or subtle branding elements that feel airy and natural.

#BFE2C6 · #8AB299 · #72997E

Earthy Contrast

Creates a clean background, highlights primary content, and provides strong calls to action with good visual hierarchy.

#BFE2C6 · #5F7F6B · #4C6A5A

CSS variables

:root {
  --seagrass-weave-texture-1: #5F7F6B;
  --seagrass-weave-texture-2: #8AB299;
  --seagrass-weave-texture-3: #BFE2C6;
  --seagrass-weave-texture-4: #4C6A5A;
  --seagrass-weave-texture-5: #72997E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seagrass-weave-texture": {
        1: "#5F7F6B",
        2: "#8AB299",
        3: "#BFE2C6",
        4: "#4C6A5A",
        5: "#72997E",
      }
    }
  }
}

Related searches

organic green palettenatural weave colorsearthy green tonessustainable brand colorsmuted forest green scheme

Palette colors

Hex values

Color 1#5F7F6B
·
Color 2#8AB299
·
Color 3#BFE2C6
·
Color 4#4C6A5A
·
Color 5#72997E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.1:1AA18
1.3:1Fail
1.4:1Fail
2
1.9:1Fail
1.7:1Fail
2.5:1Fail
1.4:1Fail
3
3.1:1AA18
1.7:1Fail
4.2:1AA18
2.3:1Fail
4
1.3:1Fail
2.5:1Fail
4.2:1AA18
1.9:1Fail
5
1.4:1Fail
1.4:1Fail
2.3:1Fail
1.9:1Fail

Similar palettes

More like Seagrass Weave Texture

View all earth
Coastal Dune Breeze
Seagrass Whisper Tones
Aegean Cliffside Home
Agave Bloom Dawn
Ancient Forest Hush
Ancient Forest Realm