Back to palettes

Palette

Fjord Cliff Hearth

Muted, cool grays reflect the serene, sturdy nature of ancient stones in a Nordic landscape.

neutralminimal5 colors
More neutral 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

#545C5A#727B79#AEB8B4#3D4442#909895

Palette guide

How to use Fjord Cliff Hearth

Overview

The Fjord Cliff Hearth palette embodies the serene, sturdy nature of ancient Nordic stones. This minimalist collection features muted, cool grays, including a deep charcoal #3D4442, a mid-dark grey-green #545C5A, and a lighter grey-green #727B79. A soft, airy grey-green #AEB8B4 and a balanced mid-light grey #909895 complete the set. It's a sophisticated palette for designers seeking a tranquil, modern, and understated aesthetic, reflecting calm and enduring strength found in natural landscapes.

Best used for

  • Minimalist branding and web design
  • Architectural and interior design presentations
  • High-end tech product interfaces
  • Tranquil spa or wellness center aesthetics
  • Scandinavian-inspired home decor
  • Sophisticated editorial layouts

Suggested color roles

primary

Use #3D4442 as a robust primary for text, strong outlines, or foundational elements, providing clear definition.

secondary

Apply #545C5A for secondary headings, navigation, or subtle background sections, offering depth without harshness.

accent

Incorporate #AEB8B4 as a delicate accent for highlights, hover states, or subtle graphic elements, adding a touch of lightness.

background

Utilize #909895 as a clean, calming background color, providing an excellent base for content and a sense of spaciousness.

text

Employ #3D4442 for body text and important information, ensuring optimal readability against lighter palette colors.

Accessibility notes

  • Text in #3D4442 on a #AEB8B4 or #909895 background offers strong contrast and readability.
  • Be cautious when pairing #727B79 text on #909895 as contrast may be insufficient for accessibility.
  • Ensure interactive elements have clearly distinguishable states, especially when using similar grey tones.
  • For headings, consider using #545C5A on #AEB8B4 for a subtle yet legible effect.

Recommended combinations

Stone Serenity

Creates a calm, balanced, and highly readable combination, ideal for primary content areas.

#3D4442 · #909895 · #AEB8B4

Minimalist Depth

Offers subtle contrast and layering, perfect for secondary elements or sophisticated visual hierarchy.

#545C5A · #727B79 · #3D4442

Nordic Calm

Provides a light and airy feel, suitable for backgrounds, subtle patterns, or a serene brand presence.

#AEB8B4 · #909895 · #545C5A

CSS variables

:root {
  --fjord-cliff-hearth-1: #545C5A;
  --fjord-cliff-hearth-2: #727B79;
  --fjord-cliff-hearth-3: #AEB8B4;
  --fjord-cliff-hearth-4: #3D4442;
  --fjord-cliff-hearth-5: #909895;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fjord-cliff-hearth": {
        1: "#545C5A",
        2: "#727B79",
        3: "#AEB8B4",
        4: "#3D4442",
        5: "#909895",
      }
    }
  }
}

Related searches

minimalist grey palettenordic stone colorsserene grey-greensophisticated neutralcool muted tones

Palette colors

Hex values

Color 1#545C5A
·
Color 2#727B79
·
Color 3#AEB8B4
·
Color 4#3D4442
·
Color 5#909895
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.4:1AA18
1.5:1Fail
2.3:1Fail
2
1.6:1Fail
2.1:1Fail
2.3:1Fail
1.5:1Fail
3
3.4:1AA18
2.1:1Fail
4.9:1AA
1.5:1Fail
4
1.5:1Fail
2.3:1Fail
4.9:1AA
3.4:1AA18
5
2.3:1Fail
1.5:1Fail
1.5:1Fail
3.4:1AA18

Similar palettes

More like Fjord Cliff Hearth

View all neutral
Cloud Cotton Comfort
Coastal Pebble Smooth
Pebble Path Serenity
Ancient Roman Stone
Ancient Ruin Stone
Ancient Rune Stone