Palette

Grassy Knoll

A lively collection of natural greens, evoking the soft, vibrant textures of a rolling grassy hill.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Grassy Knoll 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 Grassy Knoll.

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

Data visualization

#7CFC00#ADFF2F#9ACD32#6B8E23#556B2F

Palette guide

How to use Grassy Knoll

Overview

The "Grassy Knoll" palette is a vibrant and fresh collection of natural greens, evoking the lushness of a verdant landscape. From the bright, energetic #7CFC00 to the deep, earthy #556B2F, this palette, including lively shades like #ADFF2F, #9ACD32, and #6B8E23, is perfect for designs that aim to convey growth, nature, and vitality. Designers and developers can leverage these hues to create eco-friendly branding, health and wellness platforms, or outdoor recreation websites, providing a sense of freshness and organic appeal. It captures the essence of a sun-dappled, thriving grassy hill.

Best used for

Eco-friendly and sustainable brands
Garden centers and landscaping services
Health and wellness applications
Outdoor recreation and adventure tourism
Nature-themed websites and blogs
Organic food and beverage packaging

Suggested color roles

primary

Use #7CFC00 for energetic calls to action, prominent branding, or lively interactive elements, ensuring high visibility.

secondary

Apply #ADFF2F for main content areas, subheadings, or vibrant accents, providing a fresh feel.

accent

Employ #9ACD32 for subtle interactive elements, dividers, or secondary information, offering gentle emphasis.

background

A very light cream or near-white provides the best contrast. Alternatively, #ADFF2F could be used with very dark text.

text

For optimal readability on lighter greens, #556B2F or a true black offers excellent contrast and an earthy tone.

Accessibility notes

Ensure sufficient contrast for text; #556B2F on #ADFF2F or #7CFC00 provides good legibility.
Avoid placing light green text on similar light green backgrounds (e.g., #ADFF2F on #7CFC00) for critical information.
Always test interactive element states to ensure they are clearly distinguishable, especially for users with color vision deficiencies.
Consider using a dark charcoal or black for body text against any of the greens to maximize readability.

Recommended combinations

Fresh & Earthy

Creates a vibrant yet grounded feel, ideal for eco-conscious branding or nature themes.

#7CFC00 · #556B2F · #9ACD32

Lively Greens

Perfect for gradients or layered elements, conveying growth and natural harmony.

#ADFF2F · #9ACD32 · #6B8E23

Deep Contrast

A bright accent with a deep, grounding base and a rich mid-tone for a balanced, natural look.

#7CFC00 · #6B8E23 · #556B2F

CSS variables

:root {
  --grassy-knoll-2-1: #7CFC00;
  --grassy-knoll-2-2: #ADFF2F;
  --grassy-knoll-2-3: #9ACD32;
  --grassy-knoll-2-4: #6B8E23;
  --grassy-knoll-2-5: #556B2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grassy-knoll-2": {
        1: "#7CFC00",
        2: "#ADFF2F",
        3: "#9ACD32",
        4: "#6B8E23",
        5: "#556B2F",
      }
    }
  }
}

Hex values

Color 1#7CFC00

Color 2#ADFF2F

Color 3#9ACD32

Color 4#6B8E23

Color 5#556B2F

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

2.9:1Fail

4.5:1AA18

1.1:1Fail

1.5:1Fail

3.1:1AA18

4.8:1AA

1.4:1Fail

1.5:1Fail

2:1Fail

3.2:1AA18

2.9:1Fail

3.1:1AA18

2:1Fail

1.6:1Fail

4.5:1AA18

4.8:1AA

3.2:1AA18

1.6:1Fail

Similar palettes

More like Grassy Knoll

View all earth

Meadow Dew Kiss

Verdant Glade Light

Botanical Herbarium Shade

Emerald Forest Depths

Enchanted Forest Bloom

Enchanted Glade Dew