Back to palettes

Palette

Lunar Glint

Reflects the serene and cool luminescence of a full moon shining brightly on a winter night.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lunar Glint 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 Lunar Glint.

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

Data visualization

#E0F2F7#B2EBF2#80DEEA#4DD0E1#00BCD4

Palette guide

How to use Lunar Glint

Overview

The Lunar Glint palette offers a refreshing and cool spectrum, embodying the serene luminescence of a full moon on a winter night. Dominated by a range of blues from the pale #E0F2F7 to the vibrant #00BCD4, this scheme evokes clarity, calm, and a sense of cleanliness. The progressive shades like #B2EBF2 and #4DD0E1 provide excellent versatility for gradients and layered designs, making it highly appealing for digital interfaces and brands seeking a tranquil yet dynamic identity. This cool-toned collection is perfect for conveying professionalism, purity, and a sophisticated, modern aesthetic.

Best used for

  • Healthcare and wellness application interfaces
  • Technology and software branding
  • Winter-themed marketing campaigns
  • Aquatic or marine design projects
  • Clean, minimalist website layouts
  • Calming meditation or sleep apps

Suggested color roles

primary

Utilize #00BCD4 (Vibrant Cyan) for prominent calls-to-action, active states, or key graphical elements to provide a focal point.

secondary

Employ #4DD0E1 (Bright Turquoise) for secondary navigation, subtle highlights, or supporting illustrations, offering a slightly softer impact.

accent

Apply #80DEEA (Sky Blue) for subtle accents, hover effects, or decorative lines, adding a touch of lightness and ethereal glow.

background

Use #E0F2F7 (Pale Blue-White) as a clean, expansive background, creating an open and airy feel that enhances readability.

text

For primary text, use a dark charcoal or black to ensure maximum contrast against the light backgrounds. For headings, #00BCD4 can provide a fresh, branded look.

Accessibility notes

  • Ensure sufficient contrast when using lighter blues like #B2EBF2 for text on #E0F2F7 backgrounds; prefer darker shades for readability.
  • Text in #00BCD4 on #E0F2F7 provides good contrast, suitable for headings and important information.
  • Avoid using #80DEEA for small text on very light backgrounds as it may not meet WCAG contrast guidelines.
  • Maintain adequate spacing and font size when layering different blues to prevent visual clutter and improve legibility.

Recommended combinations

Sky Gradient

Excellent for creating smooth, serene gradients in hero sections, backgrounds, or data visualizations.

#E0F2F7 · #B2EBF2 · #80DEEA

Deep Water

Ideal for illustrating depth, flow, or for creating engaging, multi-layered graphical elements.

#00BCD4 · #4DD0E1 · #80DEEA

Moonlit Accent

Effective for highlighting key information or interactive elements against a clean, light background.

#E0F2F7 · #00BCD4 · #B2EBF2

CSS variables

:root {
  --lunar-glint-1: #E0F2F7;
  --lunar-glint-2: #B2EBF2;
  --lunar-glint-3: #80DEEA;
  --lunar-glint-4: #4DD0E1;
  --lunar-glint-5: #00BCD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-glint": {
        1: "#E0F2F7",
        2: "#B2EBF2",
        3: "#80DEEA",
        4: "#4DD0E1",
        5: "#00BCD4",
      }
    }
  }
}

Related searches

serene blue palettecool moonlight colorswinter blue schemeclean cyan designaquatic color themes

Palette colors

Hex values

Color 1#E0F2F7
·
Color 2#B2EBF2
·
Color 3#80DEEA
·
Color 4#4DD0E1
·
Color 5#00BCD4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.6:1Fail
2:1Fail
2
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.8:1Fail
3
1.3:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
2:1Fail
1.8:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Lunar Glint

View all cool