Palette

Icy Nordic Fjords

Majestic and vast, reflecting the dramatic cool blues and greys of remote, ice-edged fjords.

Coolcalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Icy Nordic Fjords 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 Icy Nordic Fjords.

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

Data visualization

#008080#5F9EA0#A9A9A9#F0F8FF#000080

Palette guide

How to use Icy Nordic Fjords

Overview

The "Icy Nordic Fjords" (version 2) palette presents a unique blend of deep teals, muted blues, and a soft grey, reminiscent of vast, serene landscapes. Featuring #008080 (Teal), #5F9EA0 (Cadet Blue), and a grounding #A9A9A9 (Dark Gray), this collection is excellent for designs seeking a sophisticated, calm, yet impactful presence. Developers will appreciate the strong contrast possibilities, especially with the dark blue #000080. Designers can leverage this palette for corporate sites, luxury brands, or any project requiring a blend of natural serenity and professional gravitas. The #F0F8FF (Alice Blue) provides a clean, bright counterpoint.

Best used for

Luxury travel and tourism websites
Corporate or financial services branding
Art gallery or museum digital presence
High-end product packaging design
Documentary or educational media interfaces
Environmental research organizations

Suggested color roles

primary

Utilize #008080 (Teal) for main headings, primary navigation, or call-to-action buttons, offering a distinct and engaging focal point.

secondary

Apply #5F9EA0 (Cadet Blue) for sub-headers, secondary information panels, or as a background for card-style layouts.

accent

Designate #A9A9A9 (Dark Gray) for subtle accents, borders, or iconography, providing a neutral yet sophisticated touch.

background

Employ #F0F8FF (Alice Blue) as a clean, expansive background color, allowing content to stand out clearly.

text

For primary body text, #000080 (Navy) provides excellent contrast against lighter backgrounds, ensuring high readability and a sense of authority.

Accessibility notes

Ensure #000080 text on #F0F8FF background meets WCAG AAA contrast for optimal readability.
Be careful using #A9A9A9 for smaller text on #F0F8FF; it may not provide sufficient contrast.
Verify that interactive elements using #5F9EA0 or #008080 have clear focus states.
Avoid placing #008080 text on #000080 backgrounds due to insufficient contrast.

Recommended combinations

Professional Read

Ideal for content pages: #F0F8FF as background, #000080 for body text, and #008080 for headlines or strong emphasis.

#F0F8FF · #000080 · #008080

Muted Accents

Use #5F9EA0 for a card background, #A9A9A9 for borders or secondary text, and #F0F8FF for internal content blocks.

#5F9EA0 · #A9A9A9 · #F0F8FF

Bold Navigation

A strong navigation bar with #008080 background, #F0F8FF for links, and #5F9EA0 for hover states or active indicators.

#008080 · #F0F8FF · #5F9EA0

CSS variables

:root {
  --icy-nordic-fjords-2-1: #008080;
  --icy-nordic-fjords-2-2: #5F9EA0;
  --icy-nordic-fjords-2-3: #A9A9A9;
  --icy-nordic-fjords-2-4: #F0F8FF;
  --icy-nordic-fjords-2-5: #000080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "icy-nordic-fjords-2": {
        1: "#008080",
        2: "#5F9EA0",
        3: "#A9A9A9",
        4: "#F0F8FF",
        5: "#000080",
      }
    }
  }
}

Hex values

Color 1#008080

Color 2#5F9EA0

Color 3#A9A9A9

Color 4#F0F8FF

Color 5#000080

Accessibility

Contrast checker

1.6:1Fail

2:1Fail

4.4:1AA18

3.4:1AA18

1.6:1Fail

1.3:1Fail

2.8:1Fail

5.2:1AA

2:1Fail

1.3:1Fail

2.2:1Fail

6.8:1AA

4.4:1AA18

2.8:1Fail

2.2:1Fail

14.9:1AAA

3.4:1AA18

5.2:1AA

6.8:1AA

14.9:1AAA

Similar palettes

More like Icy Nordic Fjords

View all Cool

Aegean Shoreline Treasures

Ocean Shoreline Spray

Bamboo Garden Calm

Dreamy Cloudscape Blues

Frozen Tundra Calm

Glacial Lake Tranquil