Palette

Fjord Cliff Hearth

Rugged, earthy tones inspired by the dramatic landscapes of fjords and warm, stone hearths.

EarthNatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fjord Cliff Hearth 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 Fjord Cliff Hearth.

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

Data visualization

#708090#2F4F4F#4F4F4F#8B4513#D2B48C

Palette guide

How to use Fjord Cliff Hearth

Overview

The Fjord Cliff Hearth palette draws inspiration from rugged landscapes, combining earthy tones with the coziness of a stone hearth. It features a deep forest green-grey, #2F4F4F, and a cool slate grey, #708090, reflecting solid rock. A rich saddle brown, #8B4513, evokes warmth and natural wood, while a versatile dark grey, #4F4F4F, provides depth. A creamy, warm tan, #D2B48C, brightens the scheme. This palette is perfect for designs seeking a natural, sturdy, and inviting feel, reminiscent of mountain serenity and fireside comfort.

Best used for

Outdoor adventure and gear brands
Rustic cabin and home decor
Nature-inspired photography websites
Traditional craft and artisan branding
Cozy cafe or restaurant interiors
Historical documentary design

Suggested color roles

primary

Use #2F4F4F as a strong, grounding primary color, ideal for main structures, headings, or a deep background.

secondary

Apply #708090 for secondary elements, sections, or subtle gradients, reflecting the cool tones of rock.

accent

Incorporate #8B4513 as a warm, inviting accent for calls to action, highlights, or decorative details.

background

Utilize #D2B48C as a light, warm background color, providing excellent contrast for darker text and an inviting feel.

text

Employ #4F4F4F for body text, ensuring readability while maintaining the palette's earthy and grounded aesthetic.

Accessibility notes

Text in #2F4F4F or #4F4F4F on a #D2B48C background offers excellent readability.
Be cautious using #708090 for text on #4F4F4F; ensure sufficient contrast for accessibility.
The warm #8B4513 provides good contrast on #D2B48C, but may need a darker text on its own.
For small text or UI elements, always prioritize contrast, especially between similar mid-tones.

Recommended combinations

Rugged Stone

Creates a solid, deep, and stable foundation, excellent for primary sections or strong branding.

#2F4F4F · #708090 · #4F4F4F

Hearth Glow

Offers a warm and inviting contrast, perfect for highlights, calls to action, or cozy accents.

#8B4513 · #D2B48C · #2F4F4F

Cliffside View

Provides a natural, expansive feel suitable for backgrounds, subtle patterns, or serene layouts.

#708090 · #D2B48C · #4F4F4F

CSS variables

:root {
  --fjord-cliff-hearth-2-1: #708090;
  --fjord-cliff-hearth-2-2: #2F4F4F;
  --fjord-cliff-hearth-2-3: #4F4F4F;
  --fjord-cliff-hearth-2-4: #8B4513;
  --fjord-cliff-hearth-2-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fjord-cliff-hearth-2": {
        1: "#708090",
        2: "#2F4F4F",
        3: "#4F4F4F",
        4: "#8B4513",
        5: "#D2B48C",
      }
    }
  }
}

Hex values

Color 1#708090

Color 2#2F4F4F

Color 3#4F4F4F

Color 4#8B4513

Color 5#D2B48C

Accessibility

Contrast checker

2.2:1Fail

2:1Fail

1.8:1Fail

2.1:1Fail

2.2:1Fail

1.1:1Fail

1.3:1Fail

4.5:1AA

2:1Fail

1.1:1Fail

1.2:1Fail

4.2:1AA18

1.8:1Fail

1.3:1Fail

1.2:1Fail

3.6:1AA18

2.1:1Fail

4.5:1AA

4.2:1AA18

3.6:1AA18

Similar palettes

More like Fjord Cliff Hearth

View all Earth

Desert Mesa Sculptures

Woven Basket Texture

Apothecary Herb Dry

Botanical Earth Ground

Botanical Green Sanctuary

Cabin Twilight Hearth