Porcelain
#dddcdb
Softer porcelain gray with faint warmth, not rosy
About Porcelain
Porcelain looks like the back side of a ceramic tile after the light hits it once and moves on. It's a very light gray that stays cool and neutral without drifting into the faint greeniness of Grim Grey or the creamy lift of Marble Quarry.
In UI, I reach for Porcelain as a quiet canvas when I want light gray chrome that doesn't read pink like Prelude to Pink. It's especially handy in product interfaces and admin-style screens where there's a lot of surface area: empty states, settings pages, table headers, and card backgrounds in commerce and SaaS dashboards. Type feels crisp next to it, but the page still breathes.
Quirk to watch: because it's so close to neutral, the undertone can disappear next to strong whites. If your layout uses pure white liberally, nudge your supporting tones slightly off-white or you'll lose the subtle porcelain softness.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.
