Back to palettes

Palette

Porcelain Dream Haze

Extremely subtle, pale tones resembling the delicate, muted surface of fine porcelain.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F5E6E6#E8DADA#D8CACA#C8BABA#B8A8A8

Palette guide

How to use Porcelain Dream Haze

Overview

The Porcelain Dream Haze palette features extremely subtle, pale tones resembling the delicate, muted surface of fine porcelain. Ranging from the airy #F5E6E6 to the grounding #B8A8A8, with gentle transitions through #E8DADA, #D8CACA, and #C8BABA, this scheme offers a minimalist and refined aesthetic. Designers and developers can leverage these delicate neutrals to create interfaces and designs that exude calm, sophistication, and an understated elegance. It's an excellent choice for projects requiring a soft, hazy, and tranquil touch, promoting a sense of serene focus and quiet luxury.

Best used for

  • Minimalist brand identity
  • High-end cosmetic product design
  • Serene wellness app interfaces
  • Delicate photography portfolios
  • Abstract art installations
  • Subtle interior design concepts

Suggested color roles

primary

Use #F5E6E6 as the lightest, airy base for backgrounds or expansive content areas, providing a hazy canvas.

secondary

Employ #E8DADA for soft content blocks, card backgrounds, or secondary navigation, adding muted depth.

accent

Apply #B8A8A8 as the deepest, most grounding tone for subtle accents, icons, or important, understated details.

background

Utilize #F5E6E6 as the main background, offering a clean, hazy, and expansive canvas for content.

text

For large, subtle headings, #C8BABA can provide a refined, muted look. For body text, use a dark grey or black for readability.

Accessibility notes

  • This palette features very low contrast between colors; ensure all text meets WCAG AA standards.
  • #B8A8A8 offers the most potential for text against #F5E6E6, but is best for large headings or accents.
  • For all body text and critical information, a dark charcoal or black is highly recommended for readability.
  • Interactive elements must have clear visual indicators that don't rely on subtle color differences, like underlines.

Recommended combinations

Hazy Gradient

Create smooth, ethereal backgrounds or subtle transitions in UI elements, enhancing the delicate feel.

#F5E6E6 · #E8DADA · #D8CACA

Muted Depth

#F5E6E6 as main background, #C8BABA for subheadings, and #B8A8A8 for grounding accents or subtle borders.

#F5E6E6 · #C8BABA · #B8A8A8

Soft Layers

Creating layered content blocks or cards with a refined, understated look and gentle visual hierarchy.

#E8DADA · #D8CACA · #C8BABA

CSS variables

:root {
  --porcelain-dream-haze-1: #F5E6E6;
  --porcelain-dream-haze-2: #E8DADA;
  --porcelain-dream-haze-3: #D8CACA;
  --porcelain-dream-haze-4: #C8BABA;
  --porcelain-dream-haze-5: #B8A8A8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "porcelain-dream-haze": {
        1: "#F5E6E6",
        2: "#E8DADA",
        3: "#D8CACA",
        4: "#C8BABA",
        5: "#B8A8A8",
      }
    }
  }
}

Related searches

subtle neutral palettedelicate hazy colorsminimalist grey blush schemerefined soft brandingserene muted design colors

Palette colors

Hex values

Color 1#F5E6E6
·
Color 2#E8DADA
·
Color 3#D8CACA
·
Color 4#C8BABA
·
Color 5#B8A8A8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.6:1Fail
1.9:1Fail
2
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.7:1Fail
3
1.3:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
4
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
1.9:1Fail
1.7:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Porcelain Dream Haze

View all neutral