Palette

Frozen Petal Whisper

Crisp, ethereal shades of teal and icy whites, like a rare flower blooming in glacial regions.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frozen Petal Whisper 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 Petal Whisper.

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

Data visualization

#008080#40E0D0#7FFFD4#E0FFFF#F0FFFF

Palette guide

How to use Frozen Petal Whisper

Overview

The "Frozen Petal Whisper" palette is a crisp, ethereal collection of teal and icy whites, reminiscent of a rare flower blooming in glacial regions. This cool and calm palette offers a refreshing aesthetic, perfect for designs seeking purity, tranquility, and a touch of delicate vibrancy. Shades like the deep teal #008080 provide a strong anchor, while #40E0D0 and #7FFFD4 introduce a lively, aquatic feel. The lightest tones, #E0FFFF and #F0FFFF, offer expansive, frosty backgrounds. Designers can leverage this palette for clean, invigorating interfaces, serene branding, or digital art that needs a blend of depth and lightness. It's an excellent choice for projects evoking nature's quiet strength.

Best used for

Eco-conscious brand identity
Health and wellness apps
Nature-themed digital art
Spa and beauty product packaging
Clean, modern website designs
Environmental awareness campaigns

Suggested color roles

primary

Use #008080 as the primary color for foundational elements like headers or main navigation, providing depth and stability.

secondary

Apply #40E0D0 for secondary content, interactive elements, or graphical accents to introduce a vibrant yet harmonious contrast.

accent

Introduce #7FFFD4 as a bright, crisp accent for call-to-action buttons, highlights, or subtle decorative touches, adding an icy sparkle.

background

Employ #F0FFFF as a clean, expansive background color to enhance the sense of lightness and purity across the design.

text

For optimal readability on light backgrounds, use a deep charcoal or black (e.g., #333333 or #000000). On darker elements, #E0FFFF provides excellent contrast.

Accessibility notes

Ensure sufficient contrast between #008080 text on #F0FFFF or #E0FFFF backgrounds for readability.
Avoid using #E0FFFF and #F0FFFF for critical adjacent elements due to minimal contrast.
Test interactive elements with #40E0D0 or #7FFFD4 to ensure clear visual feedback for hover and active states.
For small text, always pair a darker color like #008080 with the lightest backgrounds to maintain legibility.

Recommended combinations

Glacial Bloom

Perfect for creating striking hero sections or prominent calls-to-action, with #F0FFFF as a pristine background.

#008080 · #40E0D0 · #F0FFFF

Icy Canopy

Ideal for clean content layouts or infographics, where #7FFFD4 adds a gentle highlight to information.

#E0FFFF · #7FFFD4 · #40E0D0

Teal Frost

Excellent for branding logos or key UI elements, offering a strong base with a delicate, bright accent.

#008080 · #E0FFFF · #7FFFD4

CSS variables

:root {
  --frozen-petal-whisper-1: #008080;
  --frozen-petal-whisper-2: #40E0D0;
  --frozen-petal-whisper-3: #7FFFD4;
  --frozen-petal-whisper-4: #E0FFFF;
  --frozen-petal-whisper-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frozen-petal-whisper": {
        1: "#008080",
        2: "#40E0D0",
        3: "#7FFFD4",
        4: "#E0FFFF",
        5: "#F0FFFF",
      }
    }
  }
}

Hex values

Color 1#008080

Color 2#40E0D0

Color 3#7FFFD4

Color 4#E0FFFF

Color 5#F0FFFF

Accessibility

Contrast checker

2.9:1Fail

3.9:1AA18

4.5:1AA

4.6:1AA

2.9:1Fail

1.3:1Fail

1.6:1Fail

3.9:1AA18

1.3:1Fail

1.2:1Fail

4.5:1AA

1.6:1Fail

1.2:1Fail

1:1Fail

4.6:1AA

1.6:1Fail

1.2:1Fail

1:1Fail

Similar palettes

More like Frozen Petal Whisper

Frozen Petal Whisper

See it in context.

Ready when you are.

Built with Frozen Petal Whisper.

How to use Frozen Petal Whisper

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Glacial Bloom

Icy Canopy

Teal Frost

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Frozen Petal Whisper