Back to palettes

Palette

Porcelain Doll Face

A very subtle, almost imperceptible gradient of whites and greys for a delicate, refined look.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F0F0#E0E0E0#D0D0D0#C0C0C0#B0B0B0

Palette guide

How to use Porcelain Doll Face

Overview

The Porcelain Doll Face palette (version 2) offers a very subtle, almost imperceptible gradient of whites and greys, creating a delicate, refined look. With hues ranging from the bright #F0F0F0 to the grounding #B0B0B0, including #E0E0E0, #D0D0D0, and #C0C0C0, this scheme provides a minimalist and sophisticated aesthetic. Designers and developers can leverage these neutral tones to build clean, modern interfaces that emphasize content and structure without distraction. It's an excellent choice for projects requiring a sense of understated elegance, precision, and timeless simplicity.

Best used for

  • Minimalist UI/UX design
  • High-tech product showcases
  • Architectural portfolios
  • Sophisticated corporate branding
  • Clean editorial layouts
  • Modern art gallery websites

Suggested color roles

primary

Use #B0B0B0 as the deepest, grounding grey for primary text, outlines, or subtle shadows.

secondary

Employ #C0C0C0 for secondary text, borders, or inactive UI elements, offering balanced support.

accent

Apply #D0D0D0 as a subtle highlight for hover states, selected items, or very light decorative elements.

background

Utilize #F0F0F0 as the clean, neutral background, providing a bright and expansive canvas.

text

For main body text, #B0B0B0 provides good contrast on lighter shades. For secondary text, #C0C0C0 can be used for larger sizes.

Accessibility notes

  • #B0B0B0 provides good contrast against #F0F0F0 for body text, generally meeting WCAG AA for normal text.
  • #C0C0C0 should be used for larger text sizes on #F0F0F0 or #E0E0E0, always checking contrast ratios.
  • Avoid using #D0D0D0 or #E0E0E0 for small text on the lightest backgrounds, as contrast will be insufficient.
  • Ensure interactive elements are clearly distinguishable with sufficient contrast in all states (hover, focus, active).

Recommended combinations

Grey Scale Depth

Create a clear visual hierarchy with varying shades of grey for text, backgrounds, and separators.

#F0F0F0 · #D0D0D0 · #B0B0B0

Subtle Layers

Layered cards or content blocks, offering a refined, minimalist look with gentle distinction.

#E0E0E0 · #D0D0D0 · #C0C0C0

Clean Contrast

#F0F0F0 as background, #C0C0C0 for subheadings, and #B0B0B0 for primary text and calls to action.

#F0F0F0 · #C0C0C0 · #B0B0B0

CSS variables

:root {
  --porcelain-doll-face-2-1: #F0F0F0;
  --porcelain-doll-face-2-2: #E0E0E0;
  --porcelain-doll-face-2-3: #D0D0D0;
  --porcelain-doll-face-2-4: #C0C0C0;
  --porcelain-doll-face-2-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "porcelain-doll-face-2": {
        1: "#F0F0F0",
        2: "#E0E0E0",
        3: "#D0D0D0",
        4: "#C0C0C0",
        5: "#B0B0B0",
      }
    }
  }
}

Related searches

minimalist grey paletteclean neutral color schemesubtle ui design colorssophisticated monochrome palettelight grey brand colors

Palette colors

Hex values

Color 1#F0F0F0
·
Color 2#E0E0E0
·
Color 3#D0D0D0
·
Color 4#C0C0C0
·
Color 5#B0B0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.6:1Fail
1.9:1Fail
2
1.2:1Fail
1.2:1Fail
1.4:1Fail
1.6:1Fail
3
1.4: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.6:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Porcelain Doll Face

View all neutral
Linen Fresh
Minimal Silent Canvas
Calm Interior Lines
Arctic Fox Fur
Arctic Fox Whisper
Art Studio Canvas