Palette

Fresh Harvest Greens

A refreshing palette of verdant greens and crisp blues, like a bountiful garden harvest in early summer.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fresh Harvest Greens 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 Fresh Harvest Greens.

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

Data visualization

#556B2F#6B8E23#8FBC8F#ADD8E6#C0F0C0

Palette guide

How to use Fresh Harvest Greens

Overview

The Fresh Harvest Greens palette blends earthy, natural greens with a refreshing hint of cool blue, reminiscent of a bountiful garden. This collection features grounding tones like the deep olive #556B2F, vibrant #6B8E23, and a contrasting crisp blue #ADD8E6. It’s ideal for projects aiming to convey authenticity, organic quality, and a connection to nature. Designers and developers can use these colors to create inviting, trustworthy interfaces and branding that speaks to sustainability and wholesome goodness, with a touch of serene freshness.

Best used for

Organic food and beverage branding
Agriculture and farming websites
Natural skincare and cosmetic packaging
Sustainable fashion and eco-conscious brands
Botanical illustration and design
Educational content on nature and environment

Suggested color roles

primary

Utilize #556B2F as a grounding primary color, establishing a sense of stability and natural depth.

secondary

Employ #6B8E23 for vibrant accents, call-to-action buttons, or supporting illustrations to add a lively, fresh feel.

accent

The serene #ADD8E6 works wonderfully as a refreshing accent, providing contrast and a touch of clarity, ideal for highlights or interactive elements.

background

Opt for #C0F0C0 or #ADD8E6 as a light, airy background to ensure the darker greens stand out while maintaining a fresh aesthetic.

text

For maximum readability on light backgrounds, use a dark brown or black. On darker greens like #556B2F, white or #C0F0C0 offers excellent contrast.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #8FBC8F for large text on lighter shades.
Verify that #ADD8E6 paired with dark text meets WCAG contrast standards for readability.
The deep #556B2F offers excellent contrast for light text, making it suitable for headings or important information.
Avoid using #6B8E23 for small text on similarly bright backgrounds without careful contrast checks.

Recommended combinations

Earthy Foundation

A strong, natural base perfect for brand logos, main content sections, or product showcases.

#556B2F · #6B8E23 · #C0F0C0

Garden Fresh

Ideal for illustrations, sub-sections, or digital elements requiring a refreshing, natural pop.

#8FBC8F · #ADD8E6 · #6B8E23

Natural Contrast

Creates a striking, clean contrast for headers, calls-to-action, or key information against a dark background.

#556B2F · #ADD8E6 · #8FBC8F

CSS variables

:root {
  --fresh-harvest-greens-1: #556B2F;
  --fresh-harvest-greens-2: #6B8E23;
  --fresh-harvest-greens-3: #8FBC8F;
  --fresh-harvest-greens-4: #ADD8E6;
  --fresh-harvest-greens-5: #C0F0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fresh-harvest-greens": {
        1: "#556B2F",
        2: "#6B8E23",
        3: "#8FBC8F",
        4: "#ADD8E6",
        5: "#C0F0C0",
      }
    }
  }
}

Hex values

Color 1#556B2F

Color 2#6B8E23

Color 3#8FBC8F

Color 4#ADD8E6

Color 5#C0F0C0

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

3.9:1AA18

4.7:1AA

1.6:1Fail

1.8:1Fail

2.5:1Fail

3:1Fail

2.8:1Fail

1.8:1Fail

1.4:1Fail

1.7:1Fail

3.9:1AA18

2.5:1Fail

1.4:1Fail

1.2:1Fail

4.7:1AA

3:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Fresh Harvest Greens

View all earth

Fresh Basil Herb

Apothecary Bloom Green

Botanical Bloom Burst

Botanical Groundcover Greens

Botanical Herb Garden

Earthy Herb Garden