Palette

Arctic Lake Reflect

The crisp, clear reflections on a frozen northern lake surface, embodying peace and clarity.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Lake Reflect 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 Arctic Lake Reflect.

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

Data visualization

#000080#F0F8FF#A9A9A9#B0E0E6#2F4F4F

Palette guide

How to use Arctic Lake Reflect

Overview

The Arctic Lake Reflect palette captures the crisp, clear reflections on a frozen northern lake surface, embodying peace and clarity. Ranging from the pristine #F0F8FF to the profound #000080, this collection offers designers and developers a cool, sophisticated aesthetic perfect for conveying serenity, professionalism, and modern elegance. The prominent #A9A9A9 and #B0E0E6 provide a unique blend of deep blues and neutral greys, allowing for elegant visual hierarchies in UI design, impactful branding, and serene digital experiences. It's an excellent choice for projects that aim to evoke trust, precision, and an understated, natural sophistication.

Best used for

Corporate websites and branding
Minimalist tech interfaces
Environmental data dashboards
Luxury product presentations
Architectural firms' portfolios
Financial services platforms

Suggested color roles

primary

#000080 (A very deep, rich navy blue, excellent for main headings, crucial call-to-action buttons, or key UI elements that command attention.)

secondary

#2F4F4F (A deep, dark slate grey, ideal for subheadings, secondary interactive elements, or supporting graphical features, providing strong contrast.)

accent

#A9A9A9 (A versatile medium grey, perfect for subtle highlights, borders, or delicate design accents that provide structure without distraction.)

background

#F0F8FF (A pristine, almost-white background that ensures maximum readability and a spacious, airy feel for any design.)

text

#000080 (The deep navy provides excellent contrast for body text on lighter backgrounds, ensuring high readability.)

Accessibility notes

Ensure #000080 text on #F0F8FF background meets WCAG AAA standards for optimal readability.
Avoid using #A9A9A9 or #B0E0E6 for text on #F0F8FF, as contrast will likely be insufficient.
When using #2F4F4F for interactive elements, verify its contrast with surrounding colors for clear user feedback.
For critical information, always pair the darkest available color, #000080, with the lightest background, #F0F8FF.

Recommended combinations

Deep Reflection

Ideal for a clean background with strong primary text and a deep slate grey for headings or key actions.

#F0F8FF · #000080 · #2F4F4F

Icy Contrast

Use for creating visual depth in layered UI components, card backgrounds, or subtle gradients.

#B0E0E6 · #A9A9A9 · #000080

Grey Accent

Apply the slate grey for structural elements, with the lightest for background and the medium grey for soft accents.

#2F4F4F · #F0F8FF · #A9A9A9

CSS variables

:root {
  --arctic-lake-reflect-1: #000080;
  --arctic-lake-reflect-2: #F0F8FF;
  --arctic-lake-reflect-3: #A9A9A9;
  --arctic-lake-reflect-4: #B0E0E6;
  --arctic-lake-reflect-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-lake-reflect": {
        1: "#000080",
        2: "#F0F8FF",
        3: "#A9A9A9",
        4: "#B0E0E6",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#F0F8FF

Color 3#A9A9A9

Color 4#B0E0E6

Color 5#2F4F4F

Accessibility

Contrast checker

14.9:1AAA

6.8:1AA

11.2:1AAA

1.8:1Fail

14.9:1AAA

2.2:1Fail

1.3:1Fail

8.3:1AAA

6.8:1AA

2.2:1Fail

1.6:1Fail

3.8:1AA18

11.2:1AAA

1.3:1Fail

1.6:1Fail

6.2:1AA

1.8:1Fail

8.3:1AAA

3.8:1AA18

6.2:1AA

Similar palettes

More like Arctic Lake Reflect

View all cool

Arctic River Ice

Arctic Explorer's Dream