Palette

Frozen Lake Depths

Deep, icy blues evolving to brighter aquas, reflecting the profound, frozen stillness of a winter lake.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frozen Lake Depths 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 Frozen Lake Depths.

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

Data visualization

#0D2B4A#1C4D7A#3B7FB0#6AC9E0#9ADFFF

Palette guide

How to use Frozen Lake Depths

Overview

The 'Frozen Lake Depths' palette offers a profound and tranquil journey from deep, icy blues to brighter aquas, reflecting the frozen stillness of a winter lake. This compelling collection, ranging from the intense #0D2B4A to the luminous #9ADFFF, provides a strong sense of depth and coolness. Key shades like #1C4D7A, #3B7FB0, and #6AC9E0 create a harmonious gradient, ideal for designs that require both robustness and a touch of ethereal calm. Designers and developers can leverage this palette to create impactful digital experiences, sophisticated branding, or any project aiming to convey reliability, clarity, and a refreshing sense of modern elegance.

Best used for

Tech and software company branding
Nautical or marine-themed websites
Financial services or corporate presentations
Winter sports or adventure tourism promotions
Data visualization and dashboards
Sophisticated digital art and UI designs

Suggested color roles

primary

Use #0D2B4A for strong brand elements, main navigation, and critical calls-to-action, providing powerful anchoring.

secondary

Employ #1C4D7A for subheadings, secondary buttons, or background sections, maintaining depth and professionalism.

accent

Apply #6AC9E0 for key highlights, interactive elements, or graphic accents to draw attention with a refreshing pop.

background

Utilize #9ADFFF as a bright, airy background for main content areas, ensuring excellent readability and space.

text

For body text on lighter backgrounds, a deep color like #0D2B4A ensures optimal contrast and legibility.

Accessibility notes

Ensure high contrast when using the lightest color #9ADFFF for backgrounds; pair with dark text like #0D2B4A.
The deep blues (#0D2B4A, #1C4D7A) offer excellent contrast with lighter text (e.g., white or #9ADFFF).
Avoid placing text in mid-tones like #3B7FB0 directly on similar backgrounds without adequate contrast testing.
WCAG AA compliance should be a priority, especially for text and interactive elements across the gradient.

Recommended combinations

Deep Horizon

Creates a dramatic, high-contrast look, perfect for hero sections or impactful brand statements.

#0D2B4A · #1C4D7A · #9ADFFF

Aqua Flow

Ideal for gradients and layered visuals, evoking a sense of movement and clarity, like water.

#3B7FB0 · #6AC9E0 · #9ADFFF

Solid Contrast

Provides a robust combination for dashboards or data displays, ensuring legibility and visual hierarchy.

#0D2B4A · #6AC9E0 · #9ADFFF

CSS variables

:root {
  --frozen-lake-depths-1: #0D2B4A;
  --frozen-lake-depths-2: #1C4D7A;
  --frozen-lake-depths-3: #3B7FB0;
  --frozen-lake-depths-4: #6AC9E0;
  --frozen-lake-depths-5: #9ADFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frozen-lake-depths": {
        1: "#0D2B4A",
        2: "#1C4D7A",
        3: "#3B7FB0",
        4: "#6AC9E0",
        5: "#9ADFFF",
      }
    }
  }
}

Hex values

Color 1#0D2B4A

Color 2#1C4D7A

Color 3#3B7FB0

Color 4#6AC9E0

Color 5#9ADFFF

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

7.6:1AAA

9.8:1AAA

1.6:1Fail

2:1Fail

4.6:1AA

6:1AA

3.3:1AA18

2:1Fail

2.3:1Fail

3:1Fail