Palette

Northern Sky Radiance

Vibrant and ethereal greens and blues, mimicking the mesmerizing dance of the aurora borealis.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Northern Sky Radiance 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 Northern Sky Radiance.

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

Data visualization

#4F9C9F#82CFCB#C0EBEA#2E6B6B#6ABCBF

Palette guide

How to use Northern Sky Radiance

Overview

The "Northern Sky Radiance" palette evokes the mesmerizing dance of the aurora borealis with its vibrant greens and blues. Key colors like #4F9C9F (Teal Green), #82CFCB (Light Teal), and #2E6B6B (Dark Teal) create a serene and ethereal atmosphere. This palette is incredibly useful for designers and developers aiming for a calm, nature-inspired, or fresh feel. The harmonious blend of cool tones, including #6ABCBF (Medium Cyan) and #C0EBEA (Pale Cyan), offers both depth and lightness, making it versatile for digital interfaces, eco-friendly branding, or artistic projects that demand tranquility and natural beauty.

Best used for

Nature-themed branding (eco-friendly products)
Spa and wellness website design
Environmental non-profit visual identity
Digital art and illustration with a serene mood
UI/UX for meditation or relaxation apps
Interior design concepts for tranquil spaces

Suggested color roles

primary

#4F9C9F (Teal Green) - Use for main brand elements, large sections, or primary interactive components to establish a calm, inviting tone.

secondary

#82CFCB (Light Teal) - Ideal for supporting content, subheadings, or secondary calls-to-action, offering a softer contrast.

accent

#2E6B6B (Dark Teal) - Employ sparingly for emphasis on important details, icons, or hover states to add depth and sophistication.

background

#C0EBEA (Pale Cyan) - Provides a light, airy canvas that enhances readability and keeps the overall design feeling open and serene.

text

#2E6B6B (Dark Teal) or a charcoal grey for body text, ensuring high contrast against light backgrounds.

Accessibility notes

Ensure #2E6B6B has sufficient contrast against #C0EBEA for readability, especially for body text.
Use #4F9C9F or #6ABCBF for larger text elements or headlines against light backgrounds to meet WCAG guidelines.
Avoid using #C0EBEA as text color on very light backgrounds as contrast will be too low.
Prioritize high contrast for interactive elements like buttons to aid user navigation.

Recommended combinations

Serene Gradient

For smooth background transitions or visual storytelling in web headers.

#4F9C9F · #6ABCBF · #82CFCB

Deep Contrast

Effective for clear hierarchy, such as dark text on a light background with a mid-tone accent.

#2E6B6B · #C0EBEA · #4F9C9F

Subtle Harmony

Perfect for delicate illustrations, soft UI elements, or subtle visual cues.

#82CFCB · #C0EBEA · #6ABCBF

CSS variables

:root {
  --northern-sky-radiance-1: #4F9C9F;
  --northern-sky-radiance-2: #82CFCB;
  --northern-sky-radiance-3: #C0EBEA;
  --northern-sky-radiance-4: #2E6B6B;
  --northern-sky-radiance-5: #6ABCBF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "northern-sky-radiance": {
        1: "#4F9C9F",
        2: "#82CFCB",
        3: "#C0EBEA",
        4: "#2E6B6B",
        5: "#6ABCBF",
      }
    }
  }
}

Hex values

Color 1#4F9C9F

Color 2#82CFCB

Color 3#C0EBEA

Color 4#2E6B6B

Color 5#6ABCBF

Accessibility

Contrast checker

1.8:1Fail

2.5:1Fail

1.9:1Fail

1.5:1Fail

1.8:1Fail

1.4:1Fail

3.4:1AA18

1.2:1Fail

2.5:1Fail

1.4:1Fail

4.8:1AA

1.7:1Fail

1.9:1Fail

3.4:1AA18

4.8:1AA

2.8:1Fail

1.5:1Fail

1.2:1Fail

1.7:1Fail

2.8:1Fail

Similar palettes

More like Northern Sky Radiance

View all Cool

Aurora Veil Dance

Moonlit Cypress Grove

Open Sky Horizon

Aegean Coastline Muse

Ancient Cypress Shade

Arctic Glacier Melt