Back to palettes

Palette

Delicate Porcelain Pattern

Soft, ethereal whites and pale greens mirror the subtle elegance and translucence of fine porcelain.

neutralelegant5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F5F5F5#E0E0E0#C0D0C0#A0B0A0#B0C0B0

Palette guide

How to use Delicate Porcelain Pattern

Overview

The Delicate Porcelain Pattern palette mirrors the subtle elegance and translucence of fine porcelain with its soft, ethereal whites and pale greens. It features the crisp #F5F5F5 and the gentle #E0E0E0, transitioning into the cool, muted greens of #C0D0C0, #B0C0B0, and the deeper #A0B0A0. This elegant, delicate, and refined collection is perfect for designers seeking to evoke purity, sophistication, and understated luxury. Developers can utilize these hues for high-end product showcases, minimalist UI designs, or branding that conveys a sense of timeless grace and pristine quality, like a cherished heirloom.

Best used for

  • Luxury home goods or decor brands
  • Fine dining restaurant websites
  • Minimalist wedding stationery
  • Art gallery or museum digital presence
  • Clean, professional corporate identities
  • Spa or wellness brand identities

Suggested color roles

primary

#F5F5F5 - A crisp, ethereal white, ideal for expansive backgrounds or main content areas, conveying purity and spaciousness.

secondary

#E0E0E0 - A gentle, light grey, perfect for secondary backgrounds, subtle textures, or supporting elements.

accent

#A0B0A0 - A deeper, muted green-grey, excellent for interactive elements, calls to action, or elegant graphical accents, providing subtle depth.

background

#C0D0C0 - A soft, pale green that serves as a versatile background for content, offering a calm, refined base.

text

#A0B0A0 - Recommended for primary text against lighter backgrounds like #F5F5F5 or #E0E0E0 to ensure good readability and a sophisticated feel.

Accessibility notes

  • Text in #A0B0A0 against #F5F5F5 or #E0E0E0 will provide good contrast, generally meeting WCAG AA standards.
  • Avoid using #B0C0B0 for text on #C0D0C0, as contrast may be insufficient for smaller font sizes.
  • For critical information, especially on mid-tones, consider using a darker charcoal or black text for maximum legibility.
  • Ensure interactive elements, particularly those using #A0B0A0, are clearly distinguishable from adjacent lighter greens.

Recommended combinations

Porcelain Layers

To create soft, layered backgrounds or subtle distinctions between light, elegant content blocks.

#F5F5F5 · #E0E0E0 · #C0D0C0

Delicate Accent

Highlighting key information or interactive components, with #A0B0A0 providing a subtle, refined focal point.

#E0E0E0 · #A0B0A0 · #B0C0B0

Subtle Pattern

Effective for minimalist branding or elegant UI elements, offering a harmonious progression of soft whites and pale greens.

#F5F5F5 · #C0D0C0 · #A0B0A0

CSS variables

:root {
  --delicate-porcelain-pattern-1: #F5F5F5;
  --delicate-porcelain-pattern-2: #E0E0E0;
  --delicate-porcelain-pattern-3: #C0D0C0;
  --delicate-porcelain-pattern-4: #A0B0A0;
  --delicate-porcelain-pattern-5: #B0C0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "delicate-porcelain-pattern": {
        1: "#F5F5F5",
        2: "#E0E0E0",
        3: "#C0D0C0",
        4: "#A0B0A0",
        5: "#B0C0B0",
      }
    }
  }
}

Related searches

delicate porcelain palettepale green and white colorselegant neutral brandingrefined minimalist UIsubtle green color scheme

Palette colors

Hex values

Color 1#F5F5F5
·
Color 2#E0E0E0
·
Color 3#C0D0C0
·
Color 4#A0B0A0
·
Color 5#B0C0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2.1:1Fail
1.7:1Fail
2
1.2:1Fail
1.2:1Fail
1.7:1Fail
1.4:1Fail
3
1.5:1Fail
1.2:1Fail
1.4:1Fail
1.2:1Fail
4
2.1:1Fail
1.7:1Fail
1.4:1Fail
1.2:1Fail
5
1.7:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail

Similar palettes

More like Delicate Porcelain Pattern

View all neutral