Palette

Mermaid Tail Shimmer

The fantastical sparkle of a mermaid's scales, shifting colors under sunlit water.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mermaid Tail Shimmer 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 Mermaid Tail Shimmer.

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

Data visualization

#87CEFA#7FFFD4#B0E0E6#D8BFD8#AFEEEE

Palette guide

How to use Mermaid Tail Shimmer

Overview

The Mermaid Tail Shimmer palette captures the fantastical sparkle of a mermaid's scales, with iridescent, shifting colors under sunlit water. This pastel collection, featuring #87CEFA (Light Sky Blue), #7FFFD4 (Aquamarine), and #D8BFD8 (Thistle), is perfect for playful and dreamy designs. It’s ideal for designers and developers aiming to create whimsical, light, and magical digital experiences or branding. The inclusion of #B0E0E6 (Powder Blue) and #AFEEEE (Pale Turquoise) adds to its airy, ethereal quality, making it versatile for applications that require a touch of fantasy and softness.

Best used for

Children's brands and toy packaging
Fantasy-themed digital art and illustrations
Whimsical stationery and greeting cards
Playful user interfaces for creative apps
Fairytale-inspired event branding
Beauty products with a magical or ethereal theme

Suggested color roles

primary

Use #87CEFA as a bright, ethereal primary for main backgrounds or large content areas, establishing a dreamy feel.

secondary

Employ #7FFFD4 for secondary elements, adding a vibrant, jewel-like aquamarine pop that draws attention.

accent

Apply #D8BFD8 as a soft, magical accent for delicate details, icons, or subtle highlights, adding a touch of whimsy.

background

Utilize #AFEEEE as the lightest, airy background, providing a clean and expansive canvas for other pastels.

text

For optimal readability, use a dark gray or charcoal for all text, as the palette's lightness requires strong contrast.

Accessibility notes

Critical to use dark text (e.g., charcoal or black) on all colors in this palette to meet WCAG AA contrast standards.
Avoid using any of the palette colors for text on another palette color without rigorous contrast checking; most combinations will fail.
Consider larger font sizes for body copy to enhance readability due to the inherently low contrast nature of pastels.
Ensure interactive elements have clear and distinct visual feedback, as subtle changes might be hard to perceive.

Recommended combinations

Iridescent Glow

Ideal for creating a fantastical, shimmering effect in illustrations, headers, or playful brand elements.

#87CEFA · #7FFFD4 · #D8BFD8

Soft Water

Perfect for serene backgrounds, subtle UI elements, or conveying a sense of calm and aquatic freshness.

#AFEEEE · #B0E0E6 · #87CEFA

Whimsical Sparkle

Great for adding playful contrast and a magical touch, suitable for accents, icons, or decorative patterns.

#7FFFD4 · #D8BFD8 · #B0E0E6

CSS variables

:root {
  --mermaid-tail-shimmer-1: #87CEFA;
  --mermaid-tail-shimmer-2: #7FFFD4;
  --mermaid-tail-shimmer-3: #B0E0E6;
  --mermaid-tail-shimmer-4: #D8BFD8;
  --mermaid-tail-shimmer-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mermaid-tail-shimmer": {
        1: "#87CEFA",
        2: "#7FFFD4",
        3: "#B0E0E6",
        4: "#D8BFD8",
        5: "#AFEEEE",
      }
    }
  }
}

Hex values

Color 1#87CEFA

Color 2#7FFFD4

Color 3#B0E0E6

Color 4#D8BFD8

Color 5#AFEEEE

Accessibility

Contrast checker

1.4:1Fail

1.2:1Fail

1:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.4:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

Similar palettes

More like Mermaid Tail Shimmer

Mermaid Tail Shimmer

See it in context.

Ready when you are.

Built with Mermaid Tail Shimmer.

How to use Mermaid Tail Shimmer

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Iridescent Glow

Soft Water

Whimsical Sparkle

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mermaid Tail Shimmer