Back to palettes

Palette

Porcelain Bloom

Delicate, soft hues evoke the subtle beauty of blossoming flowers on fine porcelain.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#E6E6FA#FFF0F5#D8BFD8#FAEBD7

Palette guide

How to use Porcelain Bloom

Overview

The Porcelain Bloom palette captures the delicate, soft hues of blossoming flowers on fine porcelain, offering a calm and gentle aesthetic. With the crisp #F0F8FF, the subtle lavender of #E6E6FA, and the gentle pink of #FFF0F5, it creates an ethereal atmosphere. Grounded by the deeper #D8BFD8 and the warm #FAEBD7, this palette provides a versatile foundation for designers and developers seeking elegance and tranquility. It's perfectly suited for projects that require a clean, light, and sophisticated touch, promoting a sense of calm and natural beauty.

Best used for

  • Elegant wedding stationery
  • Soft feminine branding
  • Spa and beauty product packaging
  • Minimalist web interfaces
  • Children's book illustrations
  • Home decor inspiration boards

Suggested color roles

primary

Use #FAEBD7 as a soft, warm primary background or base, offering an inviting feel.

secondary

Employ #F0F8FF for secondary content areas, headers, or navigation, providing a crisp, cool balance.

accent

Apply #D8BFD8 as a delicate lavender highlight for small details, icons, or subtle calls to action.

background

Utilize #FFF0F5 as the main background for a gentle, near-white canvas that enhances the palette's softness.

text

For larger, subtle headings, #E6E6FA can add sophistication. For body text, use a dark grey or black for optimal readability.

Accessibility notes

  • All colors are very light; ensure text contrast is rigorously checked, especially for smaller font sizes.
  • #D8BFD8 can be used for larger text on #FFF0F5, but verify WCAG AA compliance carefully.
  • For essential body text and critical information, use a dark charcoal or black to ensure universal readability.
  • Avoid relying solely on these subtle color shifts for interactive elements; add other visual cues.

Recommended combinations

Gentle Fusion

Create soft, blended backgrounds or gradients for tranquil content areas, promoting a serene atmosphere.

#FAEBD7 · #FFF0F5 · #F0F8FF

Floral Accent

#FFF0F5 as background, #D8BFD8 for call-to-action elements, and #E6E6FA for subheadings or subtle details.

#FFF0F5 · #D8BFD8 · #E6E6FA

Clean Layers

Stacked content cards or distinct sections with subtle color shifts, creating a refined visual hierarchy.

#F0F8FF · #E6E6FA · #FAEBD7

CSS variables

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

Tailwind config

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

Related searches

soft floral color palettegentle pastel design colorsclean elegant branding schemecalm light website colorslavender cream palette

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E6E6FA
·
Color 3#FFF0F5
·
Color 4#D8BFD8
·
Color 5#FAEBD7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1:1Fail
1.6:1Fail
1.1:1Fail
2
1.1:1Fail
1.1:1Fail
1.4:1Fail
1.1:1Fail
3
1:1Fail
1.1:1Fail
1.5:1Fail
1.1:1Fail
4
1.6:1Fail
1.4:1Fail
1.5:1Fail
1.5:1Fail
5
1.1:1Fail
1.1:1Fail
1.1:1Fail
1.5:1Fail

Similar palettes

More like Porcelain Bloom

View all pastel
Whispering Orchid Petal
Cherry Blossom Whispers
Cloud Whisper Bloom
Cloud Whispers
Frosted Petal Whisper
Gentle Blossom Whisper