Palette

Fjorden Mist Calm

The serene quiet of a mist-shrouded Nordic fjord, with deep evergreen and icy blue whispers.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fjorden Mist Calm 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 Fjorden Mist Calm.

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

Data visualization

#2A3C3A#4C6F6E#8AABA9#CFE2E1#B2C7C5

Palette guide

How to use Fjorden Mist Calm

Overview

The 'Fjorden Mist Calm' palette embodies the serene quiet of a mist-shrouded Nordic fjord, featuring deep evergreen and icy blue whispers. This collection, anchored by the rich #2A3C3A and complemented by the tranquil #4C6F6E, offers a sophisticated yet grounded feel. The lighter tones of #8AABA9, #CFE2E1, and #B2C7C5 add an ethereal quality, reminiscent of diffuse light through mist. Designers and developers will find this palette ideal for creating immersive digital experiences, branding, or environmental graphics that require a natural, calm, and slightly muted aesthetic, conveying depth and tranquility.

Best used for

Nature-inspired branding
Environmental non-profit websites
Spa and wellness digital interfaces
Outdoor apparel e-commerce
Documentary film graphics
Sustainable product packaging

Suggested color roles

primary

#2A3C3A - A deep, grounding evergreen perfect for main navigation, bold headlines, or solid background sections requiring a strong, stable anchor.

secondary

#4C6F6E - Use for subheadings, secondary buttons, or larger content blocks to add a touch of cool depth without being overwhelming.

accent

#8AABA9 - An elegant, muted teal that works well for subtle highlights, icons, or graphical elements, adding a hint of color interest.

background

#CFE2E1 - A very light, almost white, cool background that provides excellent contrast for darker text and keeps the overall design airy and fresh.

text

#2A3C3A - Ideal for primary body text against lighter backgrounds like #CFE2E1, ensuring excellent readability and cohesion with the palette's deep tones.

Accessibility notes

Ensure #2A3C3A text on #CFE2E1 background meets WCAG contrast standards for readability.
Be mindful when using #8AABA9 for text on #B2C7C5 or #CFE2E1, as contrast may be insufficient for small fonts.
Use #4C6F6E for interactive elements and verify its contrast against neighboring colors.
For critical information, avoid using the lightest colors (#CFE2E1, #B2C7C5) as text colors.

Recommended combinations

Misty Greens

Perfect for hero sections or landing pages, establishing a deep, natural, and calm atmosphere.

#2A3C3A · #4C6F6E · #CFE2E1

Fjord Depths

Effective for data visualizations or complex infographics, providing clear differentiation with depth.

#2A3C3A · #8AABA9 · #B2C7C5

Airy Calm

Ideal for clean content blocks or card designs, offering soft transitions and easy readability.

#CFE2E1 · #B2C7C5 · #4C6F6E

CSS variables

:root {
  --fjorden-mist-calm-1: #2A3C3A;
  --fjorden-mist-calm-2: #4C6F6E;
  --fjorden-mist-calm-3: #8AABA9;
  --fjorden-mist-calm-4: #CFE2E1;
  --fjorden-mist-calm-5: #B2C7C5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fjorden-mist-calm": {
        1: "#2A3C3A",
        2: "#4C6F6E",
        3: "#8AABA9",
        4: "#CFE2E1",
        5: "#B2C7C5",
      }
    }
  }
}

Hex values

Color 1#2A3C3A

Color 2#4C6F6E

Color 3#8AABA9

Color 4#CFE2E1

Color 5#B2C7C5

Accessibility

Contrast checker

2.1:1Fail

4.7:1AA

8.6:1AAA

6.6:1AA

2.1:1Fail

2.2:1Fail

4.1:1AA18

3.1:1AA18

4.7:1AA

2.2:1Fail

1.8:1Fail

1.4:1Fail

8.6:1AAA

4.1:1AA18

1.8:1Fail

1.3:1Fail

6.6:1AA

3.1:1AA18

1.4:1Fail

1.3:1Fail

Similar palettes

More like Fjorden Mist Calm

View all cool

Alpine Forest Chill

Frosted Evergreen Mist

Frosted Juniper Berries

Frosty Morning Lake

Frozen Forest Dawn

Nordic Winter Calm