Palette

Grassy Knoll

Fresh and varied greens evoke the verdant beauty of a sun-dappled, gentle grassy knoll.

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

#5F9F9F#6B8E23#7CFC00#ADFF2F#BDB76B

Palette guide

How to use Grassy Knoll

Overview

The "Grassy Knoll" palette offers a refreshing blend of greens and earthy tones, capturing the serene beauty of a natural landscape. Featuring vibrant grass greens like #7CFC00 and #ADFF2F, balanced with the unique blue-green #5F9F9F and the muted olive #6B8E23, this palette is ideal for designs aiming for an organic, tranquil, or rustic feel. The touch of #BDB76B adds a sun-baked, natural warmth. Designers and developers can leverage these hues for eco-conscious branding, wellness platforms, or nature-themed content, providing an inviting and harmonious aesthetic that evokes a gentle, sun-dappled meadow.

Best used for

Organic food and beverage brands
Nature photography and travel blogs
Rustic home decor and craft businesses
Wellness and mindfulness retreats
Environmental conservation initiatives
Gardening and botanical websites

Suggested color roles

primary

Use #7CFC00 for impactful calls to action, cheerful branding, or vibrant highlights, ensuring energy.

secondary

Apply #6B8E23 for main content areas, earthy foundations, or navigation elements, providing stability.

accent

Employ #ADFF2F for lively highlights, interactive elements, or secondary information, offering a fresh touch.

background

A light cream or near-white provides optimal contrast. A very muted green like a lighter shade of #BDB76B could also work.

text

For optimal readability on lighter backgrounds, #6B8E23 or a deep charcoal offers excellent contrast and an organic feel.

Accessibility notes

Ensure good contrast for text; #6B8E23 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 darker, contrasting color for body text against any of the greens to improve overall readability.

Recommended combinations

Vibrant Nature

Creates a lively yet grounded natural feel, perfect for eco-friendly branding or outdoor themes.

#7CFC00 · #6B8E23 · #ADFF2F

Earthy Blend

Ideal for layered elements or subtle background textures, providing warmth and organic depth.

#6B8E23 · #BDB76B · #5F9F9F

Fresh Contrast

A cool base with a vibrant accent and a warm earthy tone for a balanced, inviting look.

#5F9F9F · #ADFF2F · #BDB76B

CSS variables

:root {
  --grassy-knoll-1: #5F9F9F;
  --grassy-knoll-2: #6B8E23;
  --grassy-knoll-3: #7CFC00;
  --grassy-knoll-4: #ADFF2F;
  --grassy-knoll-5: #BDB76B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grassy-knoll": {
        1: "#5F9F9F",
        2: "#6B8E23",
        3: "#7CFC00",
        4: "#ADFF2F",
        5: "#BDB76B",
      }
    }
  }
}

Hex values

Color 1#5F9F9F

Color 2#6B8E23

Color 3#7CFC00

Color 4#ADFF2F

Color 5#BDB76B

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

2.5:1Fail

1.5:1Fail

1.3:1Fail

2.9:1Fail

3.1:1AA18

1.8:1Fail

2.3:1Fail

2.9:1Fail

1.1:1Fail

1.6:1Fail