Palette

Rain-Kissed Ferns

Cool, damp greens and grays that evoke the freshness and tranquility of ferns after a soft rainfall.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rain-Kissed Ferns 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 Rain-Kissed Ferns.

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

Data visualization

#3A4D4A#5E7A77#8BA29E#2D3C3A#222E2C

Palette guide

How to use Rain-Kissed Ferns

Overview

The Rain-Kissed Ferns palette captures the cool, damp greens and grays that evoke the freshness and tranquility of ferns after a soft rainfall. This collection, featuring deep tones like #3A4D4A, #5E7A77, and #222E2C, provides a calming yet sophisticated aesthetic. Designers and developers can utilize this palette to create serene, natural, and eco-friendly designs. Its muted richness offers versatility for conveying a sense of grounded tranquility, making it ideal for brands focused on sustainability, wellness, or natural beauty. The subtle variations in green-gray allow for depth without being overwhelming.

Best used for

Eco-friendly and sustainable brand identities
Nature documentaries and environmental awareness campaigns
Spa and wellness center websites and marketing
Minimalist design projects requiring earthy tones
Outdoor apparel and gear branding
Interior design concepts emphasizing natural tranquility

Suggested color roles

primary

#3A4D4A serves as a deep, grounding green-gray, ideal for main headings, brand logos, or prominent UI elements.

secondary

#5E7A77 offers a softer, supportive green, perfect for subheadings, secondary buttons, or accent panels.

accent

#8BA29E provides a light, fresh highlight, excellent for interactive elements, hover states, or subtle graphic details.

background

#8BA29E creates a soft, natural, and calming base, offering a pleasant backdrop for darker text and UI elements.

text

#222E2C provides the deepest tone for excellent readability on lighter backgrounds, ensuring strong contrast.

Accessibility notes

Text on #8BA29E as a background will require dark text like #222E2C or #2D3C3A for sufficient contrast.
The darker shades (#3A4D4A, #2D3C3A, #222E2C) offer strong contrast for text when placed against very light backgrounds.
Avoid using #5E7A77 for small text on #8BA29E without checking contrast ratios carefully.
Ensure interactive elements are clearly distinguishable, especially when using the lighter shades of the palette.

Recommended combinations

Forest Depth

Ideal for creating a grounded and rich visual hierarchy in sections like footers, sidebars, or deep content blocks.

#222E2C · #2D3C3A · #3A4D4A

Misty Greens

Use for a smooth, tranquil gradient, perfect for backgrounds, banners, or illustrations with a natural theme.

#3A4D4A · #5E7A77 · #8BA29E

Subtle Contrast

Pair the lightest shade with the darkest for text, using a mid-tone for accents in a clean, natural design.

#8BA29E · #222E2C · #5E7A77

CSS variables

:root {
  --rain-kissed-ferns-1: #3A4D4A;
  --rain-kissed-ferns-2: #5E7A77;
  --rain-kissed-ferns-3: #8BA29E;
  --rain-kissed-ferns-4: #2D3C3A;
  --rain-kissed-ferns-5: #222E2C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rain-kissed-ferns": {
        1: "#3A4D4A",
        2: "#5E7A77",
        3: "#8BA29E",
        4: "#2D3C3A",
        5: "#222E2C",
      }
    }
  }
}

Hex values

Color 1#3A4D4A

Color 2#5E7A77

Color 3#8BA29E

Color 4#2D3C3A

Color 5#222E2C

Accessibility

Contrast checker

1.9:1Fail

3.3:1AA18

1.3:1Fail

1.6:1Fail

1.9:1Fail

1.7:1Fail

2.5:1Fail

3:1AA18

3.3:1AA18

1.7:1Fail

4.3:1AA18

5.2:1AA

1.3:1Fail

2.5:1Fail

4.3:1AA18

1.2:1Fail

1.6:1Fail

3:1AA18

5.2:1AA

1.2:1Fail

Similar palettes

More like Rain-Kissed Ferns

View all Cool

Ancient Cypress Shade

Whispering Pine Forest

Enchanted Teal Forest

Frosty Pine Winter

Moonlit Cypress Grove

Aurora Veil Dance