Palette

Sky Painter's Haze

Delicate and ethereal pinks and purples, like a gentle sunset haze across a clear evening sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sky Painter's Haze 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 Sky Painter's Haze.

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

Data visualization

#D1B3C4#E3BCCC#F7C6CC#F7DEDD#FDF7F5

Palette guide

How to use Sky Painter's Haze

Overview

The "Sky Painter's Haze" palette captures the delicate beauty of a sunset, offering a range of ethereal pinks and purples. With hues like the muted lavender #D1B3C4, the soft rose #E3BCCC, the gentle coral #F7C6CC, the subtle blush #F7DEDD, and the near-white #FDF7F5, this collection exudes a serene and romantic mood. It's perfectly suited for designs that aim to convey femininity, softness, or a dreamlike quality. Developers and designers can leverage these shades to create elegant interfaces, sophisticated branding, or evocative visual content that feels both warm and airy.

Best used for

Beauty and cosmetics branding
Wedding photography portfolios
Romantic fashion editorials
Spa and relaxation app interfaces
Interior design inspiration boards
High-end confectionery packaging

Suggested color roles

primary

#D1B3C4 - A sophisticated, muted lavender-pink, excellent for setting a refined and calm primary tone in interfaces or branding.

secondary

#E3BCCC - A softer, warm rose hue, ideal for supporting elements, secondary backgrounds, or subtle interactive components.

accent

#F7C6CC - A vibrant yet gentle coral-pink, perfect for highlights, call-to-action buttons, or decorative details that need to pop softly.

background

#FDF7F5 - The lightest, almost off-white cream, providing a clean, airy canvas for content, ensuring maximum readability for dark text.

text

Dark charcoal or deep plum like #333333 or #5C405C - Essential for ensuring contrast and readability against these very light colors.

Accessibility notes

Text readability is critical; ensure dark text (e.g., black or dark grey) is used on all background colors.
Avoid using any two palette colors for text/background combinations without rigorous contrast checking.
Interactive elements should have clear focus states that pass WCAG contrast requirements.
The lightest colors are too subtle for anything but background use with very dark text.

Recommended combinations

Sunset Blush

Ideal for romantic web banners or sophisticated social media graphics, evoking a warm glow.

#D1B3C4 · #F7C6CC · #FDF7F5

Ethereal Gradient

Great for delicate gradients in UI elements or background textures, creating smooth transitions.

#E3BCCC · #F7DEDD · #FDF7F5

Soft Contrast

Effective for elegant layouts where the primary color provides depth against a very light background.

#D1B3C4 · #FDF7F5 · #F7DEDD

CSS variables

:root {
  --sky-painter-s-haze-1: #D1B3C4;
  --sky-painter-s-haze-2: #E3BCCC;
  --sky-painter-s-haze-3: #F7C6CC;
  --sky-painter-s-haze-4: #F7DEDD;
  --sky-painter-s-haze-5: #FDF7F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sky-painter-s-haze": {
        1: "#D1B3C4",
        2: "#E3BCCC",
        3: "#F7C6CC",
        4: "#F7DEDD",
        5: "#FDF7F5",
      }
    }
  }
}

Hex values

Color 1#D1B3C4

Color 2#E3BCCC

Color 3#F7C6CC

Color 4#F7DEDD

Color 5#FDF7F5

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.8:1Fail

1.1:1Fail

1.3:1Fail

1.6:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.5:1Fail

1.3:1Fail

1.2:1Fail

1.8:1Fail

1.6:1Fail

1.4:1Fail

1.2:1Fail

Similar palettes

More like Sky Painter's Haze

Sky Painter's Haze

See it in context.

Ready when you are.

Built with Sky Painter's Haze.

How to use Sky Painter's Haze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunset Blush

Ethereal Gradient

Soft Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sky Painter's Haze