Palette

Porcelain Bloom Serene

Inspired by the delicate translucence of porcelain, this palette offers a soft, elegant touch reminiscent of fragile blossoms.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Porcelain Bloom Serene 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 Porcelain Bloom Serene.

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

Data visualization

#FDF5E6#FFF0F5#F0F8FF#E6E6FA#D8BFD8

Palette guide

How to use Porcelain Bloom Serene

Overview

The Porcelain Bloom Serene palette offers a calming blend of soft pastels, evoking the delicate translucence of fine porcelain and fragile blossoms. Featuring the creamy warmth of #FDF5E6, the gentle pink of #FFF0F5, and the airy blue of #F0F8FF, it creates a serene atmosphere. Supported by the subtle lavender of #E6E6FA and the deeper #D8BFD8, this palette is ideal for designers and developers seeking to convey peace, elegance, and minimalist beauty. Its harmonious hues lend themselves to projects requiring a light, sophisticated, and tranquil aesthetic.

Best used for

Wellness and meditation app interfaces
Baby product branding and packaging
High-end stationery and paper goods
Minimalist website themes
Bridal and event decor inspiration
Gentle art and illustration

Suggested color roles

primary

Use #FDF5E6 as a warm, inviting primary background or base color, offering a touch of creaminess.

secondary

Employ #F0F8FF for secondary content areas, headers, or navigation, providing a cool, airy complement.

accent

Apply #D8BFD8 as a soft lavender accent for highlights, small icons, or subtle call-to-action elements.

background

Utilize #FFF0F5 as the main background for a subtle, almost white canvas that feels gentle and expansive.

text

For larger, decorative headings, #E6E6FA can provide a sophisticated, muted look. For body text, use a dark grey or black for optimal readability.

Accessibility notes

Most colors are very light; ensure sufficient contrast for all text elements, especially smaller fonts.
#D8BFD8 offers the best contrast for text against #FDF5E6 or #FFF0F5, but verify WCAG AA compliance.
For critical body text, always use a dark neutral color like charcoal or black to guarantee universal readability.
Interactive elements should have distinct visual cues beyond subtle color changes, such as underlines or bolding.

Recommended combinations

Airy Gradient

Create smooth, tranquil transitions for headers, modal backgrounds, or subtle infographics.

#F0F8FF · #E6E6FA · #D8BFD8

Gentle Contrast

#FFF0F5 as the main background, #D8BFD8 for key accents, and #FDF5E6 for secondary content blocks.

#FFF0F5 · #D8BFD8 · #FDF5E6

Muted Harmony

Layered backgrounds for a serene and cohesive look, ideal for soft-focus content areas.

#FDF5E6 · #FFF0F5 · #E6E6FA

CSS variables

:root {
  --porcelain-bloom-serene-1: #FDF5E6;
  --porcelain-bloom-serene-2: #FFF0F5;
  --porcelain-bloom-serene-3: #F0F8FF;
  --porcelain-bloom-serene-4: #E6E6FA;
  --porcelain-bloom-serene-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "porcelain-bloom-serene": {
        1: "#FDF5E6",
        2: "#FFF0F5",
        3: "#F0F8FF",
        4: "#E6E6FA",
        5: "#D8BFD8",
      }
    }
  }
}

Hex values

Color 1#FDF5E6

Color 2#FFF0F5

Color 3#F0F8FF

Color 4#E6E6FA

Color 5#D8BFD8

Accessibility

Contrast checker

1:1Fail

1.1:1Fail

1.6:1Fail

1:1Fail

1.1:1Fail

1.5:1Fail

1:1Fail

1.1:1Fail

1.6:1Fail

1.1:1Fail

1.4:1Fail

1.6:1Fail

1.5:1Fail

1.6:1Fail

1.4:1Fail

Similar palettes

More like Porcelain Bloom Serene

Porcelain Bloom Serene

See it in context.

Ready when you are.

Built with Porcelain Bloom Serene.

How to use Porcelain Bloom Serene

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Airy Gradient

Gentle Contrast

Muted Harmony

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Porcelain Bloom Serene