Palette

Frosted Berry Dream

A soft, enchanting mix of lavender and magenta, like frosted berries on a chilly winter morning.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frosted Berry Dream 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 Frosted Berry Dream.

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

Data visualization

#723E6B#B462A1#E5B2DD#3D2338#9B4F8C

Palette guide

How to use Frosted Berry Dream

Overview

This "Frosted Berry Dream" palette offers a serene and sophisticated blend of deep and light berry tones, perfect for creating an ethereal, calm aesthetic. Featuring a rich plum like #723E6B, a vibrant magenta #B462A1, and a soft lavender #E5B2DD, it evokes the delicate beauty of winter berries. The dark charcoal #3D2338 provides grounding depth, while the muted rose #9B4F8C offers a harmonious mid-tone. Designers and developers can leverage this palette for projects requiring a touch of elegance and mystery, from branding to UI elements, ensuring a cohesive and visually pleasing experience. Its gentle yet impactful presence makes it versatile for various digital and print applications.

Best used for

High-end beauty product branding
Elegant wedding invitations and stationery
Serene spa or wellness website design
Fashion editorial layouts with a dreamy aesthetic
UI elements for luxury mobile apps
Interior design mood boards for tranquil spaces

Suggested color roles

primary

Use this deep plum #723E6B for main brand elements, headers, or significant UI components to establish a sophisticated and stable foundation.

secondary

Apply this vibrant magenta #B462A1 for secondary calls-to-action, active states, or subheadings to add energy without overpowering the primary.

accent

This soft lavender #E5B2DD is ideal for subtle highlights, interactive elements, or delicate illustrations, offering a light, dreamy touch.

background

A gentle background for content areas, creating a soft, airy canvas that allows darker text and elements to stand out. Consider #E5B2DD.

text

Employ this dark charcoal #3D2338 for body text and important labels, ensuring excellent readability against lighter backgrounds, or use pure white on darker elements.

Accessibility notes

Ensure sufficient contrast when pairing #3D2338 text with #E5B2DD backgrounds for readability.
Avoid using #E5B2DD as text on #B462A1 backgrounds, as contrast may be insufficient.
For interactive elements, provide visual cues beyond color, especially when using lighter tones like #E5B2DD.
Darker colors like #723E6B and #3D2338 offer good contrast for white text, enhancing accessibility.

Recommended combinations

Deep & Light

A balanced trio for headers, body text, and background, offering strong contrast and elegance.

#723E6B · #E5B2DD · #3D2338

Vibrant Focus

Use #B462A1 for key actions, #3D2338 for text, and #E5B2DD for subtle UI accents.

#B462A1 · #3D2338 · #E5B2DD

Soft Blend

Ideal for gradients or layered graphics, providing a smooth transition between mid-tone and deeper shades.

#9B4F8C · #E5B2DD · #723E6B

CSS variables

:root {
  --frosted-berry-dream-1: #723E6B;
  --frosted-berry-dream-2: #B462A1;
  --frosted-berry-dream-3: #E5B2DD;
  --frosted-berry-dream-4: #3D2338;
  --frosted-berry-dream-5: #9B4F8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-berry-dream": {
        1: "#723E6B",
        2: "#B462A1",
        3: "#E5B2DD",
        4: "#3D2338",
        5: "#9B4F8C",
      }
    }
  }
}

Hex values

Color 1#723E6B

Color 2#B462A1

Color 3#E5B2DD

Color 4#3D2338

Color 5#9B4F8C

Accessibility

Contrast checker

2:1Fail

4.5:1AA18

1.7:1Fail

1.5:1Fail

2:1Fail

2.3:1Fail

3.5:1AA18

1.3:1Fail

4.5:1AA18

2.3:1Fail

7.9:1AAA

3:1AA18

1.7:1Fail

3.5:1AA18

7.9:1AAA

2.6:1Fail

1.5:1Fail

1.3:1Fail

3:1AA18

2.6:1Fail

Similar palettes

More like Frosted Berry Dream