Palette

Seaside Agave Bloom

Soft, muted greens and off-whites inspired by the resilient agave plants thriving along a serene coastline.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Agave Bloom 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 Seaside Agave Bloom.

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

Data visualization

#8F9D8F#B2C0B2#D6DED6#EDF1ED#6D7B6D

Palette guide

How to use Seaside Agave Bloom

Overview

The Seaside Agave Bloom palette embodies a tranquil, nature-inspired aesthetic with its soft, muted greens and off-whites. Drawing inspiration from resilient agave plants along a serene coastline, this palette features hex codes such as #8F9D8F (Agave Green), #B2C0B2 (Light Agave), #D6DED6 (Pale Agave), #EDF1ED (Off-White Agave), and #6D7B6D (Dark Agave Green). It's perfectly suited for designers and developers aiming to create organic, calming, and eco-conscious digital or physical experiences. The gentle progression from deep green to airy off-white provides a harmonious and refreshing visual journey, evoking a sense of growth and peaceful stability.

Best used for

Eco-conscious brand identity and marketing materials
Wellness or meditation application interfaces
Botanical garden websites or nature conservancy projects
Sustainable product packaging and eco-friendly designs
Interior design for tranquil and biophilic spaces
Digital art with natural, serene themes

Suggested color roles

primary

Use #6D7B6D (Dark Agave Green) as a deep, calming green perfect for main navigation, prominent call-to-action buttons, or impactful headers.

secondary

Employ #8F9D8F (Muted Agave) to offer a slightly lighter, complementary shade, ideal for subheadings, secondary buttons, or subtle data visualization elements.

accent

Apply #B2C0B2 (Light Agave) for subtle highlights, interactive states, or to add a touch of freshness without overpowering the overall serene mood.

background

Utilize #EDF1ED (Off-White Agave) to provide a clean, airy canvas that allows the various greens to breathe and maintains a light, expansive feel.

text

For primary text, #6D7B6D ensures excellent readability on light backgrounds. A dark charcoal like #333333 or #8F9D8F can be used for secondary text or captions.

Accessibility notes

Ensure high contrast between #6D7B6D and #EDF1ED for critical text elements to meet accessibility standards.
The combination of #D6DED6 and #EDF1ED has very low contrast; avoid using them together for essential information or small text.
Test text on #B2C0B2 and #8F9D8F to ensure sufficient contrast against lighter backgrounds, especially for smaller font sizes.
A dark text color on #D6DED6 or #EDF1ED will generally provide good accessibility.

Recommended combinations

Agave Core

Ideal for establishing a strong, natural brand presence, using the darkest green for impact and the lightest for spaciousness in hero sections.

#6D7B6D · #8F9D8F · #EDF1ED

Leaf & Light

Creates a soft, ethereal look, suitable for delicate backgrounds, subtle gradients, or overlays in serene and contemplative interfaces.

#B2C0B2 · #D6DED6 · #EDF1ED

Deep Roots

A grounded combination for content blocks where a strong, yet soothing, visual hierarchy is desired, offering depth and natural texture.

#6D7B6D · #D6DED6 · #8F9D8F

CSS variables

:root {
  --seaside-agave-bloom-1: #8F9D8F;
  --seaside-agave-bloom-2: #B2C0B2;
  --seaside-agave-bloom-3: #D6DED6;
  --seaside-agave-bloom-4: #EDF1ED;
  --seaside-agave-bloom-5: #6D7B6D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-agave-bloom": {
        1: "#8F9D8F",
        2: "#B2C0B2",
        3: "#D6DED6",
        4: "#EDF1ED",
        5: "#6D7B6D",
      }
    }
  }
}

Hex values

Color 1#8F9D8F

Color 2#B2C0B2

Color 3#D6DED6

Color 4#EDF1ED

Color 5#6D7B6D

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

2.5:1Fail

1.6:1Fail

1.5:1Fail

1.4:1Fail

1.7:1Fail

2.4:1Fail

2.1:1Fail

1.4:1Fail

1.2:1Fail

3.2:1AA18

2.5:1Fail

1.7:1Fail

1.2:1Fail

3.9:1AA18

1.6:1Fail

2.4:1Fail

3.2:1AA18

3.9:1AA18

Similar palettes

More like Seaside Agave Bloom

View all neutral

Coastal Driftwood Grey

Coastal Driftwood Shore

Coastal Dune Grass

Coastal Seagrass Sway

Driftwood Shore Breeze

Misty Mountain Path