Palette

Arctic Sunset Ice

Captures the fleeting, delicate colors of a serene sunset over an expanse of untouched arctic ice.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Sunset Ice 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 Sunset Ice.

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

Data visualization

#6D8B9B#9EBBC8#D1E0E9#486A7B#ADC7D7

Palette guide

How to use Arctic Sunset Ice

Overview

The Arctic Sunset Ice palette captures the fleeting, delicate colors of a serene sunset over an expanse of untouched arctic ice. It features a range of muted, cool tones: a deep teal-grey #6D8B9B, a softer #9EBBC8, and the very light #D1E0E9. A slightly darker #486A7B provides a grounding influence, while #ADC7D7 offers another versatile mid-tone. This palette is perfect for designers and developers seeking a minimalist, sophisticated, and calming aesthetic. Its subtle variations and cool serenity make it ideal for creating clean interfaces, refined branding, or evocative content that conveys tranquility and understated elegance.

Best used for

Minimalist web and app interfaces
Luxury home decor branding
Environmental research websites
High-end photography portfolios
Winter-themed digital content
Architectural visualization

Suggested color roles

primary

The deep #486A7B serves as a strong primary for foundational elements, headings, or important calls-to-action, providing necessary depth.

secondary

Use #6D8B9B for secondary information, subheadings, or inactive states, maintaining a harmonious flow.

accent

The lightest shade, #D1E0E9, can act as a clean accent for interactive elements or delicate highlights, maintaining luminosity.

background

Employ #D1E0E9 as a pristine, expansive background, creating an open, airy, and inviting canvas.

text

For optimal readability, use #486A7B or black for primary text on light backgrounds. For dark backgrounds, #D1E0E9 works best.

Accessibility notes

Ensure strong contrast between the darker shades (#486A7B, #6D8B9B) and the lightest (#D1E0E9) for all text and interactive elements.
Avoid using #9EBBC8 for text against #ADC7D7 due to insufficient contrast for WCAG AA compliance.
Verify that all interactive elements have clear visual indicators for focus and hover states beyond color alone.
Consider using #486A7B or black for all critical information to ensure maximum legibility across diverse viewing conditions.

Recommended combinations

Icy Calm

Excellent for clean layouts, using the dark teal-grey for headings/buttons and the light for content areas.

#486A7B · #6D8B9B · #D1E0E9

Sunset Layers

Ideal for subtle background textures, layered cards, or soft gradients that need to feel clean and airy.

#9EBBC8 · #ADC7D7 · #D1E0E9

Muted Horizon

Use for professional reports or dashboards, where clarity and a calm, authoritative tone are important.

#6D8B9B · #ADC7D7 · #486A7B

CSS variables

:root {
  --arctic-sunset-ice-1: #6D8B9B;
  --arctic-sunset-ice-2: #9EBBC8;
  --arctic-sunset-ice-3: #D1E0E9;
  --arctic-sunset-ice-4: #486A7B;
  --arctic-sunset-ice-5: #ADC7D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-sunset-ice": {
        1: "#6D8B9B",
        2: "#9EBBC8",
        3: "#D1E0E9",
        4: "#486A7B",
        5: "#ADC7D7",
      }
    }
  }
}

Hex values

Color 1#6D8B9B

Color 2#9EBBC8

Color 3#D1E0E9

Color 4#486A7B

Color 5#ADC7D7

Accessibility

Contrast checker

1.8:1Fail

2.7:1Fail

1.6:1Fail

2.1:1Fail

1.8:1Fail

1.5:1Fail

2.9:1Fail

1.1:1Fail

2.7:1Fail

1.5:1Fail

4.3:1AA18

1.3:1Fail