Back to palettes

Palette

Fresh Cut Grass

Lively greens reminiscent of a vibrant lawn under the morning sun, evoking a sense of renewal.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fresh Cut Grass 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 Cut Grass.

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

Data visualization

#4CAF50#66BB6A#81C784#A5D6A7#C8E6C9

Palette guide

How to use Fresh Cut Grass

Overview

The Fresh Cut Grass palette offers a soothing gradient of greens, reminiscent of a vibrant, healthy lawn. From the deep, grounding #4CAF50 to the airy #C8E6C9, this collection evokes a sense of nature, renewal, and tranquility. Designers and developers can utilize these harmonious tones to build serene user experiences, establish an eco-conscious brand identity, or create inviting digital spaces. The consistent green theme ensures a cohesive and calming visual language, perfect for conveying natural freshness and growth across various platforms.

Best used for

  • Environmental and sustainability branding
  • Health and wellness applications
  • Gardening and outdoor lifestyle products
  • Eco-friendly product packaging
  • Spa and relaxation service websites
  • Natural food and organic brand identities

Suggested color roles

primary

Use #4CAF50 as a strong, reliable primary color for branding, important headers, or significant UI elements.

secondary

Employ #66BB6A for supporting content, background sections, or illustrations, providing a softer green complement.

accent

The lightest shade, #C8E6C9, can serve as a subtle accent for hover states, delicate icons, or background textures.

background

Choose #C8E6C9 or #A5D6A7 for a clean, light, and airy background that enhances the natural feel.

text

For optimal readability on lighter greens, use a dark gray or black. For text on #4CAF50, a crisp white is recommended.

Accessibility notes

  • Ensure sufficient contrast when placing text on lighter greens like #A5D6A7 or #C8E6C9.
  • Use #4CAF50 or #66BB6A for primary text on light backgrounds to meet WCAG guidelines.
  • Avoid using light green text on light green backgrounds; always aim for significant contrast.
  • Check that interactive elements, especially links, have adequate color contrast and alternative indicators.

Recommended combinations

Natural Gradient

Excellent for creating depth in backgrounds, data visualizations, or smooth transitions.

#4CAF50 · #66BB6A · #81C784

Soft Contrast

Provides a gentle yet distinct contrast, suitable for main content areas with clear headings.

#A5D6A7 · #4CAF50 · #C8E6C9

Eco Base

A clean, fresh base for content with readable dark gray text, perfect for web pages.

#C8E6C9 · #66BB6A · #81C784

CSS variables

:root {
  --fresh-cut-grass-1: #4CAF50;
  --fresh-cut-grass-2: #66BB6A;
  --fresh-cut-grass-3: #81C784;
  --fresh-cut-grass-4: #A5D6A7;
  --fresh-cut-grass-5: #C8E6C9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fresh-cut-grass": {
        1: "#4CAF50",
        2: "#66BB6A",
        3: "#81C784",
        4: "#A5D6A7",
        5: "#C8E6C9",
      }
    }
  }
}

Related searches

green color schemesnature inspired paletteeco-friendly colorsfresh green designgarden color ideas

Palette colors

Hex values

Color 1#4CAF50
·
Color 2#66BB6A
·
Color 3#81C784
·
Color 4#A5D6A7
·
Color 5#C8E6C9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.7:1Fail
2.1:1Fail
2
1.2:1Fail
1.2:1Fail
1.4:1Fail
1.8:1Fail
3
1.4:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.7:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
2.1:1Fail
1.8:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Fresh Cut Grass

View all vibrant
Botanical Bloom Canopy
Electric Meadow
Jungle Canopy Pulse
Meadow Bloom
Mint Leaf Morning
Spring Daffodil Field