Palette

Nordic Fjeld Moss

Evokes the quiet strength of ancient moss and stones found within a tranquil northern landscape.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nordic Fjeld Moss 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 Nordic Fjeld Moss.

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

Data visualization

#7D8E74#A6B4A6#C7CDB5#3C4F44#4F6352

Palette guide

How to use Nordic Fjeld Moss

Overview

The "Nordic Fjeld Moss" palette is a tranquil and earthy collection, inspired by the quiet strength of northern landscapes. It features a range of muted greens and natural grays, from a deep forest green (#3C4F44) to a soft, almost lichen-like beige-green (#C7CDB5). The mid-tones, including #7D8E74 and #A6B4A6, provide a cohesive, organic flow, evoking the subtle textures of moss, stone, and ancient trees. This palette is ideal for designers seeking to create a serene, grounded, and understated aesthetic that connects with nature. Developers can leverage these hex codes for eco-friendly branding, outdoor-themed applications, or any project aiming for a calm, natural, and sophisticated appeal.

Best used for

Eco-conscious brand identities
Nature photography websites
Outdoor adventure gear e-commerce
Wellness and meditation app interfaces
Sustainable living blogs
Botanical garden branding

Suggested color roles

primary

Deep, grounding forest green (#3C4F44), ideal for dominant backgrounds, headers, or strong foundational elements.

secondary

Slightly lighter dark green (#4F6352), excellent for secondary content blocks, navigation, or subtle dividers.

accent

Light, muted beige-green (#C7CDB5), used sparingly for delicate highlights, subtle borders, or secondary interactive states.

background

Soft, light green-gray (#A6B4A6), providing a gentle, natural canvas.

text

For dark text on light backgrounds, use #3C4F44 or #4F6352. For lighter text on dark backgrounds, a creamy white or #C7CDB5 can work well.

Accessibility notes

Ensure sufficient contrast when pairing text colors, especially on mid-tones like #A6B4A6 or #7D8E74.
Dark text like #3C4F44 on #C7CDB5 or #A6B4A6 will provide good readability.
#C7CDB5 might not have enough contrast with #A6B4A6 for small text; use for larger headings.
Verify that interactive elements are clearly distinguishable for all users, including those with color vision deficiencies.

Recommended combinations

Forest Floor

Deep greens with a light accent, perfect for establishing an organic, natural feel.

#3C4F44 · #7D8E74 · #C7CDB5

Mossy Stones

Creates layered depth for content blocks, evoking the subtle textures of nature.

#A6B4A6 · #4F6352 · #7D8E74

Fjeld Light

A light, airy base with strong, grounding accents, ideal for text and primary elements.

#C7CDB5 · #3C4F44 · #A6B4A6

CSS variables

:root {
  --nordic-fjeld-moss-1: #7D8E74;
  --nordic-fjeld-moss-2: #A6B4A6;
  --nordic-fjeld-moss-3: #C7CDB5;
  --nordic-fjeld-moss-4: #3C4F44;
  --nordic-fjeld-moss-5: #4F6352;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-fjeld-moss": {
        1: "#7D8E74",
        2: "#A6B4A6",
        3: "#C7CDB5",
        4: "#3C4F44",
        5: "#4F6352",
      }
    }
  }
}

Hex values

Color 1#7D8E74

Color 2#A6B4A6

Color 3#C7CDB5

Color 4#3C4F44

Color 5#4F6352

Accessibility

Contrast checker

1.6:1Fail

2.1:1Fail

2.5:1Fail

1.9:1Fail

1.6:1Fail

1.3:1Fail

4.1:1AA18

3:1Fail

2.1:1Fail

1.3:1Fail

5.4:1AA

4:1AA18

2.5:1Fail

4.1:1AA18

5.4:1AA

1.4:1Fail

1.9:1Fail

3:1Fail

4:1AA18

1.4:1Fail

Similar palettes

More like Nordic Fjeld Moss

View all earth

Ancient Forest Hearth

Ancient Moss Rune

Ancient Moss Whisper

Deep Forest Undergrowth

Emerald Moss Glade

Forest Floor Moss