Pastel Pink Background
#FFD1DC · rgb(255, 209, 220)
About the pastel pink background
Pastel pink (#FFD1DC) pushes pink even closer to white — rgb(255, 209, 220) — which is exactly the soft, airy tone behind 'aesthetic' feeds, kawaii branding and modern nursery design.
It's calm enough to sit behind real content yet warm enough to feel intentional. Pair it with charcoal or navy text for contrast, or build a full pastel palette with mint, lavender and butter yellow.
What to use a pastel pink background for
- Aesthetic Instagram feeds and social templates
- Nursery, kids' brands and baby-shower themes
- Soft SaaS and lifestyle marketing pages
- Base color for pastel gradient palettes
How to use pastel pink in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page pastel pink background */
body {
margin: 0;
background-color: #FFD1DC;
}
/* A single section or element */
.hero {
background-color: rgb(255, 209, 220);
} Pastel Pink shades and tints
Click any swatch to copy it. Tints mix pastel pink with white; shades mix it with black.
Pastel Pink background FAQ
What is pastel pink's hex code?
The most commonly cited pastel pink is #FFD1DC — rgb(255, 209, 220). Any pale, high-lightness pink around hsl(350, 100%, 89%) reads as pastel pink.
What colors go with a pastel pink background?
Pastel pink harmonizes with mint green, lavender, baby blue and cream. For accessible text, use charcoal or navy — both clear WCAG AA easily on this light background.
What is the hex code for pastel pink?
Pastel Pink is #FFD1DC in hexadecimal, rgb(255, 209, 220) in RGB and hsl(346, 100%, 91%) in HSL. Paste #FFD1DC into any CSS background-color property to use it.
How do I set a pastel pink background in CSS?
Add background-color: #FFD1DC; to any element, or apply it to the whole page: body { background-color: #FFD1DC; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 209, 220) — with identical results.