Palette

Arctic Ocean

A tranquil blend of icy blues and crystalline whites, reflecting the vast Arctic waters.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0FFFF#AFEEEE#B0E0E6#87CEEB#6A5ACD

Palette guide

How to use Arctic Ocean

Overview

The Arctic Ocean palette offers a tranquil blend of icy blues and crystalline whites, perfect for creating serene and refreshing digital experiences. Featuring the ethereal light blue of #E0FFFF and the slightly deeper aquamarine #AFEEEE, it transitions smoothly into the cool, muted cyan of #B0E0E6. A vibrant sky blue, #87CEEB, adds a touch of clarity, culminating in the rich, deep periwinkle of #6A5ACD. This palette is ideal for projects aiming to evoke calmness, purity, and a sense of vast, open spaces. Designers and developers will find its cohesive cool tones versatile for various applications, from clean user interfaces to evocative branding.

Best used for

Wellness and meditation apps
Coastal or nature-themed websites
Winter-themed event branding
Eco-friendly product packaging
Spa and relaxation marketing materials
Clean, minimalist UI designs

Suggested color roles

primary

Use the deep periwinkle #6A5ACD for strong brand elements, primary calls-to-action, or important headings to ground the design.

secondary

The vibrant sky blue #87CEEB works well for secondary actions, active states, or illustrative elements, providing a refreshing contrast.

accent

Introduce the light aquamarine #AFEEEE or #B0E0E6 for subtle highlights, interactive elements, or progress indicators, maintaining a cool feel.

background

Employ the lightest icy blue #E0FFFF as a clean, expansive background, providing a sense of openness and tranquility.

text

For optimal readability against light backgrounds, use a dark charcoal or a deep blue like #6A5ACD for primary text. For lighter text on dark backgrounds, #E0FFFF is suitable.

Accessibility notes

Ensure sufficient contrast between #6A5ACD and lighter shades like #E0FFFF for text and interactive elements.
Avoid using #AFEEEE and #B0E0E6 as text colors against each other due to potentially low contrast.
Verify that all text and icon colors meet WCAG AA or AAA guidelines, especially for smaller font sizes.
Consider providing a dark mode option using #6A5ACD as a background for users sensitive to light interfaces.

Recommended combinations

Ocean Depths

Ideal for hero sections or brand logos, leveraging deep blue for impact and light blue for freshness.

#6A5ACD · #87CEEB · #E0FFFF

Coastal Breeze

Excellent for soft gradients, background textures, or subtle UI elements, creating a gentle flow.

#AFEEEE · #B0E0E6 · #E0FFFF

Arctic Horizon

Effective for data visualizations or infographics, showing progression or distinct categories with cool tones.

#87CEEB · #6A5ACD · #AFEEEE

CSS variables

:root {
  --arctic-ocean-1: #E0FFFF;
  --arctic-ocean-2: #AFEEEE;
  --arctic-ocean-3: #B0E0E6;
  --arctic-ocean-4: #87CEEB;
  --arctic-ocean-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-ocean": {
        1: "#E0FFFF",
        2: "#AFEEEE",
        3: "#B0E0E6",
        4: "#87CEEB",
        5: "#6A5ACD",
      }
    }
  }
}

Hex values

Color 1#E0FFFF

Color 2#AFEEEE

Color 3#B0E0E6

Color 4#87CEEB

Color 5#6A5ACD

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.7:1Fail

5:1AA

1.2:1Fail

1.1:1Fail

1.4:1Fail

4.1:1AA18

1.4:1Fail

1.1:1Fail

1.2:1Fail

3.7:1AA18

1.7:1Fail

1.4:1Fail

1.2:1Fail

3:1AA18

5:1AA

4.1:1AA18

3.7:1AA18

3:1AA18

Similar palettes

More like Arctic Ocean

Arctic Ocean

See it in context.

Ready when you are.

Built with Arctic Ocean.

How to use Arctic Ocean

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ocean Depths

Coastal Breeze

Arctic Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Arctic Ocean