Palette

Garden Gate Ivy

Verdant greens intertwined with soft earth tones, painting a picture of a peaceful, overgrown garden entrance.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Garden Gate Ivy 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 Garden Gate Ivy.

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

Data visualization

#4F7942#6B8E23#8FBC8F#624D3D#F5F5DC

Palette guide

How to use Garden Gate Ivy

Overview

The 'Garden Gate Ivy' palette embodies a peaceful, overgrown garden entrance, blending verdant greens with soft earth tones. It features deep #4F7942 (forest green), vibrant #6B8E23 (olive green), and calming #8FBC8F (seafoam green), providing a rich natural depth. Grounded by the rustic #624D3D (dark brown) and brightened by the creamy #F5F5DC (linen white), this palette evokes a sense of tranquility and organic elegance. Developers and designers can use these colors to create inviting, eco-friendly interfaces, rustic branding, or any project seeking a connection to nature's serene beauty and timeless charm.

Best used for

Eco-friendly and sustainable brand identities
Rustic home decor and interior design
Landscape design and gardening websites
Organic food and natural product packaging
Nature photography portfolios or blogs
Outdoor adventure and apparel branding

Suggested color roles

primary

Utilize #4F7942 (forest green) for main headers, navigation, or significant graphical elements to establish a strong natural presence.

secondary

Apply #6B8E23 (olive green) for sub-sections, background patterns, or to add textural depth to designs.

accent

Introduce #8FBC8F (seafoam green) for highlights, interactive elements, or to provide a fresh, lighter touch within the green spectrum.

background

Employ #F5F5DC (linen white) as a clean, warm background, or use #8FBC8F for a softer, nature-infused base.

text

Use #624D3D (dark brown) or a deep charcoal for body text for optimal readability, especially against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast when using #8FBC8F as a background for text; darker text is usually required.
The #F5F5DC background provides excellent contrast for all darker colors in the palette, including #4F7942 and #624D3D.
Avoid placing light text directly on #6B8E23 or #4F7942 without checking contrast ratios carefully.
For a natural feel, dark brown text (#624D3D) on #F5F5DC is a highly readable combination.

Recommended combinations

Forest Path

Ideal for grounded designs, logos, or headers, establishing a strong, natural and trustworthy feel.

#4F7942 · #624D3D · #F5F5DC

Ivy & Earth

Perfect for creating organic illustrations, textured backgrounds, or showcasing natural product lines.

#6B8E23 · #8FBC8F · #624D3D

Rustic Calm

Provides a serene and clean aesthetic, suitable for tranquil websites, spa branding, or elegant print materials.

#F5F5DC · #4F7942 · #8FBC8F

CSS variables

:root {
  --garden-gate-ivy-1: #4F7942;
  --garden-gate-ivy-2: #6B8E23;
  --garden-gate-ivy-3: #8FBC8F;
  --garden-gate-ivy-4: #624D3D;
  --garden-gate-ivy-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "garden-gate-ivy": {
        1: "#4F7942",
        2: "#6B8E23",
        3: "#8FBC8F",
        4: "#624D3D",
        5: "#F5F5DC",
      }
    }
  }
}

Hex values

Color 1#4F7942

Color 2#6B8E23

Color 3#8FBC8F

Color 4#624D3D

Color 5#F5F5DC

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

1.6:1Fail

4.6:1AA

1.3:1Fail

1.8:1Fail

2.1:1Fail

3.4:1AA18

2.4:1Fail

1.8:1Fail

3.7:1AA18

1.9:1Fail

1.6:1Fail

2.1:1Fail

3.7:1AA18

7.2:1AAA

4.6:1AA

3.4:1AA18

1.9:1Fail

7.2:1AAA

Similar palettes

More like Garden Gate Ivy

View all earth

Enchanted Garden Gate