Back to palettes

Palette

Porcelain Grace

A refined and delicate palette inspired by vintage porcelain, evoking a sense of calm and classic grace.

neutralelegant5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DED3CB#E6DDD9#F2EBE8#CDC2BA#B7ABA4

Palette guide

How to use Porcelain Grace

Overview

The Porcelain Grace palette is a refined collection of delicate, vintage-inspired neutrals, perfect for evoking a sense of calm and classic elegance. This sophisticated scheme features soft, muted tones ranging from the almost-white #F2EBE8 to the gentle greige of #DED3CB and the deeper, grounding #B7ABA4. Designers can utilize these hues to create sophisticated, understated designs that feel both timeless and contemporary. Developers will find them excellent for crafting subtle UI elements, elegant backgrounds, or sophisticated branding. It’s an ideal choice for projects seeking a serene, high-quality aesthetic with a touch of antique charm.

Best used for

  • Luxury product branding and packaging
  • High-end fashion and beauty websites
  • Elegant wedding stationery and event design
  • Minimalist interior design mood boards
  • Sophisticated editorial layouts
  • Art gallery or museum digital presence

Suggested color roles

primary

#F2EBE8 - An airy, near-white base perfect for main backgrounds, providing a clean and expansive canvas.

secondary

#E6DDD9 - Use for secondary content areas, card backgrounds, or subtle dividers, adding warmth and depth without stark contrast.

accent

#B7ABA4 - A deeper, grounding tone ideal for subtle accents, typography for titles, or interactive elements that need a touch of presence.

background

#F2EBE8 - Offers a light, clean, and elegant backdrop for most content. For a slightly warmer feel, #E6DDD9 can be used.

text

For light backgrounds like #F2EBE8 or #E6DDD9, a dark brown or charcoal (e.g., #4A4A4A) provides good contrast. For #B7ABA4, white text is most legible.

Accessibility notes

  • Pay close attention to contrast ratios, especially when pairing lighter shades like #F2EBE8 and #E6DDD9.
  • Ensure text on #DED3CB or #CDC2BA backgrounds meets WCAG AA standards.
  • Use a contrast checker for all foreground-background combinations.
  • Reserve the darkest shade, #B7ABA4, for important interactive elements or key typography to ensure visibility.

Recommended combinations

Soft Elegance

Creates a harmonious, delicate backdrop for elegant websites or print.

#F2EBE8 · #E6DDD9 · #DED3CB

Vintage Depth

Provides more visual weight, suitable for footers, sidebars, or grounding elements.

#E6DDD9 · #CDC2BA · #B7ABA4

Understated Charm

A balanced trio for clean layouts, using the deepest tone for key accents.

#F2EBE8 · #CDC2BA · #B7ABA4

CSS variables

:root {
  --porcelain-grace-1: #DED3CB;
  --porcelain-grace-2: #E6DDD9;
  --porcelain-grace-3: #F2EBE8;
  --porcelain-grace-4: #CDC2BA;
  --porcelain-grace-5: #B7ABA4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "porcelain-grace": {
        1: "#DED3CB",
        2: "#E6DDD9",
        3: "#F2EBE8",
        4: "#CDC2BA",
        5: "#B7ABA4",
      }
    }
  }
}

Related searches

elegant neutral color schemesvintage porcelain palettesoft greige hex codessophisticated light brownclassic minimalist colors

Palette colors

Hex values

Color 1#DED3CB
·
Color 2#E6DDD9
·
Color 3#F2EBE8
·
Color 4#CDC2BA
·
Color 5#B7ABA4
·

Accessibility

Contrast checker

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

Similar palettes

More like Porcelain Grace

View all neutral