Palette

Agave Succulent Dew

Soft, muted greens and greys capturing the serene beauty of a dew-kissed succulent garden.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Agave Succulent Dew 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 Agave Succulent Dew.

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

Data visualization

#A1A78B#C0C8B1#D8E0CC#79836B#525E4B

Palette guide

How to use Agave Succulent Dew

Overview

The Agave Succulent Dew palette features soft, muted greens and greys, capturing the serene beauty of a dew-kissed succulent garden. This natural and minimalist collection includes a very pale grey-green #D8E0CC, a light sage #C0C8B1, a muted olive #A1A78B, a deeper sage #79836B, and a dark moss green #525E4B. It's perfect for designers aiming to convey calm, organic freshness, and a minimalist aesthetic. Developers will find these harmonious hex codes excellent for creating tranquil interfaces, eco-friendly branding, and content that evokes natural serenity and understated elegance.

Best used for

Botanical and garden websites
Eco-friendly product packaging
Mindfulness and wellness apps
Minimalist interior design
Natural skincare brands
Sustainable living blogs

Suggested color roles

primary

Use #A1A78B as a calming primary for main headings or large sections, representing succulent leaves.

secondary

Employ #C0C8B1 for clean, airy backgrounds or secondary elements, mimicking soft morning light.

accent

Apply #525E4B sparingly for impactful calls to action or key highlights, adding depth and grounding.

background

Utilize #D8E0CC for crisp, expansive backgrounds, providing a fresh, neutral canvas.

text

A deep brown or black works perfectly on #D8E0CC, while white text is ideal on #525E4B for strong readability.

Accessibility notes

Ensure sufficient contrast for text on #D8E0CC; a dark text color like #525E4B is essential.
Avoid using #C0C8B1 for text against #D8E0CC as contrast will be too low for readability.
White text on #525E4B and #79836B should meet WCAG AA contrast standards.
For interactive elements, ensure distinct visual cues beyond color, especially with subtle green-grey shifts.

Recommended combinations

Dew-Kissed

For soft, layered backgrounds or delicate UI components, creating a fresh, organic feel.

#D8E0CC · #C0C8B1 · #A1A78B

Deep Succulent

Ideal for headers or footers, blending deep greens with a light, airy accent.

#79836B · #525E4B · #D8E0CC

Garden Greens

Effective for brand elements or illustrations, offering a harmonious and natural progression.

#A1A78B · #79836B · #C0C8B1

CSS variables

:root {
  --agave-succulent-dew-1: #A1A78B;
  --agave-succulent-dew-2: #C0C8B1;
  --agave-succulent-dew-3: #D8E0CC;
  --agave-succulent-dew-4: #79836B;
  --agave-succulent-dew-5: #525E4B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "agave-succulent-dew": {
        1: "#A1A78B",
        2: "#C0C8B1",
        3: "#D8E0CC",
        4: "#79836B",
        5: "#525E4B",
      }
    }
  }
}

Hex values

Color 1#A1A78B

Color 2#C0C8B1

Color 3#D8E0CC

Color 4#79836B

Color 5#525E4B

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

1.6:1Fail

2.7:1Fail

1.4:1Fail

1.3:1Fail

2.3:1Fail

4:1AA18

1.8:1Fail

1.3:1Fail

2.9:1Fail

5:1AA

1.6:1Fail

2.3:1Fail

2.9:1Fail

1.7:1Fail

2.7:1Fail

4:1AA18

5:1AA

1.7:1Fail

Similar palettes

More like Agave Succulent Dew

Natural Linen Texture

River Delta Silt