Palette

Frozen Dewdrop Glass

Captures the delicate shimmer of morning dew frozen into crystalline beauty, crisp and clear.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frozen Dewdrop Glass 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 Frozen Dewdrop Glass.

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

Data visualization

#ADD8E6#87CEEB#4682B4#1E90FF#00008B

Palette guide

How to use Frozen Dewdrop Glass

Overview

The 'Frozen Dewdrop Glass' palette offers a crisp and clear aesthetic, capturing the delicate shimmer of morning dew frozen into crystalline beauty. Dominated by cool blues, it ranges from the soft sky blue of #ADD8E6 to the deep, impactful navy of #00008B. This versatile collection, including the vibrant #1E90FF and sturdy #4682B4, is ideal for projects requiring a sense of freshness, transparency, and modern minimalism. Designers and developers will find its gradient of blues perfect for creating depth and visual interest in clean, contemporary interfaces or elegant branding. It evokes a serene yet dynamic atmosphere, perfect for conveying clarity and precision.

Best used for

Minimalist website designs and user interfaces
Branding for tech startups or consulting firms
Winter-themed marketing materials or events
Clean, professional corporate presentations
Environmental or scientific visualization projects
Digital art and illustration with a cool, ethereal mood

Suggested color roles

primary

Use #4682B4 for core elements like navigation and primary calls-to-action, providing a strong, reliable presence.

secondary

Employ #87CEEB for subheadings, secondary buttons, or background sections to add a lighter, supportive tone.

accent

Apply #1E90FF for key interactive elements, alerts, or small graphic details to draw immediate attention.

background

Utilize #ADD8E6 as a clean, airy base for main content areas, promoting readability and a sense of space.

text

Pair a dark navy like #00008B for main body text on lighter backgrounds to ensure high contrast and legibility.

Accessibility notes

Ensure sufficient contrast between #ADD8E6 and any text placed upon it; darker text (e.g., #00008B) is recommended.
The bright #1E90FF should be used sparingly for critical interactive elements to avoid visual fatigue.
Test color pairings like #87CEEB text on #ADD8E6 background for readability, especially for users with visual impairments.
Maintain a minimum WCAG AA contrast ratio for all text and UI elements, particularly with the lighter blues.

Recommended combinations

Deep Clarity

Excellent for high-contrast interfaces, using the darkest blue for text and the lightest for background.

#00008B · #4682B4 · #ADD8E6

Vibrant Flow

Ideal for dynamic sections, highlighting key information with vibrancy against a supportive mid-tone.

#1E90FF · #87CEEB · #4682B4

Soft Transition

Creates a smooth, ethereal gradient for backgrounds or layered graphical elements, evoking depth.

#ADD8E6 · #87CEEB · #4682B4

CSS variables

:root {
  --frozen-dewdrop-glass-1: #ADD8E6;
  --frozen-dewdrop-glass-2: #87CEEB;
  --frozen-dewdrop-glass-3: #4682B4;
  --frozen-dewdrop-glass-4: #1E90FF;
  --frozen-dewdrop-glass-5: #00008B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frozen-dewdrop-glass": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#4682B4",
        4: "#1E90FF",
        5: "#00008B",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#87CEEB

Color 3#4682B4

Color 4#1E90FF

Color 5#00008B

Accessibility

Contrast checker

1.1:1Fail

2.7:1Fail

2.1:1Fail

10:1AAA

1.1:1Fail

2.4:1Fail

1.9:1Fail

8.8:1AAA

2.7:1Fail

2.4:1Fail

1.3:1Fail

3.7:1AA18