Palette

Viking Coastal Stone

Rough and resilient, drawing inspiration from the grey, weathered stones along ancient Norse shores.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Viking Coastal Stone 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 Viking Coastal Stone.

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

Data visualization

#4C5D6B#7C8B9A#AABBD0#CDE1E8#5C6A7A

Palette guide

How to use Viking Coastal Stone

Overview

The Viking Coastal Stone palette is a collection of rugged, resilient cool tones, inspired by the weathered stones along ancient Norse shores. This palette features the deep blue-grey of #4C5D6B, the dependable #7C8B9A (medium grey), and the lighter, airy #AABBD0 (light blue-grey). Complementary shades like #CDE1E8 (very light blue-grey) and the slightly darker #5C6A7A reinforce its earthy, strong character. It offers designers and developers a robust yet serene foundation for projects that aim to convey strength, durability, and a connection to nature or history. Ideal for minimalist designs or themes requiring a cool, grounded aesthetic, it provides a sense of calm and enduring quality.

Best used for

Outdoor gear and apparel branding
Architectural design presentations
Historical documentaries and media
Minimalist branding and web design
Rugged tech interfaces and products
Coastal-themed interior decor

Suggested color roles

primary

Use #4C5D6B as a strong, stable primary color for headers or foundational elements, conveying resilience.

secondary

Employ #7C8B9A as a versatile mid-tone for secondary sections or backgrounds, balancing the palette.

accent

Apply #CDE1E8 as a subtle, cool accent for highlights, delicate lines, or interactive states.

background

Utilize #AABBD0 as a calm, expansive background, creating an open and serene visual space.

text

For readability, use #4C5D6B or #5C6A7A for text on lighter backgrounds like #CDE1E8 or #AABBD0, or white on the darkest tones.

Accessibility notes

Ensure #4C5D6B or #5C6A7A text on #CDE1E8 or #AABBD0 has sufficient contrast for readability.
Avoid using lighter palette colors for small text on #7C8B9A (medium grey) due to potential contrast issues.
For body text, prioritize darker shades on lighter backgrounds to meet WCAG accessibility standards.
Always test text and interactive elements with actual content to confirm legibility across devices.

Recommended combinations

Coastal Depths

A gradient-like trio from deep to light grey-blue, perfect for conveying depth and horizon.

#4C5D6B · #7C8B9A · #AABBD0

Weathered Shore

Ideal for a muted, airy feel, reminiscent of light on weathered stone and misty coastlines.

#5C6A7A · #AABBD0 · #CDE1E8

Nordic Horizon

Use for a balanced, cool aesthetic, combining mid-tones with a light accent and a deep anchor.

#7C8B9A · #CDE1E8 · #4C5D6B

CSS variables

:root {
  --viking-coastal-stone-1: #4C5D6B;
  --viking-coastal-stone-2: #7C8B9A;
  --viking-coastal-stone-3: #AABBD0;
  --viking-coastal-stone-4: #CDE1E8;
  --viking-coastal-stone-5: #5C6A7A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "viking-coastal-stone": {
        1: "#4C5D6B",
        2: "#7C8B9A",
        3: "#AABBD0",
        4: "#CDE1E8",
        5: "#5C6A7A",
      }
    }
  }
}

Hex values

Color 1#4C5D6B

Color 2#7C8B9A

Color 3#AABBD0

Color 4#CDE1E8

Color 5#5C6A7A

Accessibility

Contrast checker

2:1Fail

3.5:1AA18

5:1AA

1.2:1Fail

2:1Fail

1.8:1Fail

2.6:1Fail

1.6:1Fail

3.5:1AA18

1.8:1Fail

1.4:1Fail

2.8:1Fail

5:1AA

2.6:1Fail

1.4:1Fail

4.1:1AA18

1.2:1Fail

1.6:1Fail

2.8:1Fail

4.1:1AA18

Similar palettes

More like Viking Coastal Stone

View all cool

Aegean Coast Breeze

Coastal Seagrass Whisper

Emerald Coastline Bloom

Emerald Moss Stone

Ocean Glass Shards

Ocean Stone Radiance