Palette

Tundra Basin

Cold, muted blues and grays, evoking the vast, desolate landscape of an icy tundra basin.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tundra Basin 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 Tundra Basin.

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

Data visualization

#3C4A5A#687D8F#9FB2C4#D1DEEC#2E3A47

Palette guide

How to use Tundra Basin

Overview

The Tundra Basin palette encapsulates the serene, vast beauty of an icy landscape with its cool, muted blues and grays. Ranging from the deep #2E3A47 and #3C4A5A, through the balanced #687D8F and #9FB2C4, to the light #D1DEEC, this collection provides a sophisticated and calming aesthetic. Designers and developers will find it perfect for projects requiring a sense of minimalism, professionalism, and quiet strength. It evokes feelings of clarity, stability, and a refined elegance, making it ideal for brands seeking to convey trustworthiness, modernity, and a clean, understated presence.

Best used for

Corporate and professional website design
Modern architectural visualizations
High-tech product branding
Financial services or consulting firm materials
Minimalist UI/UX design
Winter-themed marketing campaigns

Suggested color roles

primary

#2E3A47 serves as a strong, grounding anchor for main text, headers, or dominant structural elements.

secondary

#3C4A5A provides a deep, sophisticated alternative for background sections or secondary content blocks.

accent

#687D8F offers a subtle, yet distinct, accent for interactive elements, borders, or to add visual depth.

background

#D1DEEC provides a clean, expansive, and calming canvas, ensuring excellent readability and a spacious feel.

text

#2E3A47 or a pure black for optimal contrast and legibility against the lighter palette colors.

Accessibility notes

Ensure sufficient contrast between lighter shades like #D1DEEC and text when used as a background.
The subtle differences between #3C4A5A and #2E3A47 may be challenging for colorblind users; use them for distinct purposes.
White text works well on #2E3A47 and #3C4A5A; dark text is essential for #D1DEEC and #9FB2C4.
Always verify contrast ratios for text and interactive elements to meet WCAG AA or AAA standards.

Recommended combinations

Deep Freeze

Strong headers, background panels, and sophisticated branding elements.

#2E3A47 · #3C4A5A · #687D8F

Icy Gradient

Smooth transitions, subtle background textures, or layered content blocks.

#687D8F · #9FB2C4 · #D1DEEC

Arctic Clarity

Clean layouts, primary content areas with strong text contrast, and clear navigation.

#D1DEEC · #2E3A47 · #9FB2C4

CSS variables

:root {
  --tundra-basin-1: #3C4A5A;
  --tundra-basin-2: #687D8F;
  --tundra-basin-3: #9FB2C4;
  --tundra-basin-4: #D1DEEC;
  --tundra-basin-5: #2E3A47;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tundra-basin": {
        1: "#3C4A5A",
        2: "#687D8F",
        3: "#9FB2C4",
        4: "#D1DEEC",
        5: "#2E3A47",
      }
    }
  }
}

Hex values

Color 1#3C4A5A

Color 2#687D8F

Color 3#9FB2C4

Color 4#D1DEEC

Color 5#2E3A47

Accessibility

Contrast checker

2.1:1Fail

4.2:1AA18

6.6:1AA

1.3:1Fail

2.1:1Fail

2:1Fail

3.1:1AA18

2.7:1Fail

4.2:1AA18

2:1Fail

1.6:1Fail

5.3:1AA

6.6:1AA

3.1:1AA18

1.6:1Fail

8.5:1AAA

1.3:1Fail

2.7:1Fail

5.3:1AA

8.5:1AAA

Similar palettes

More like Tundra Basin

Arctic Shoreline Chill

Arctic Sky Drift

Arctic Sunset Ice