Pink Background
#FFC0CB · rgb(255, 192, 203)
About the pink background
Pink (#FFC0CB) is red softened with white into rgb(255, 192, 203) — the canonical pink and a named CSS keyword. It's sweet, familiar and instantly readable as 'pink' across cultures.
As a background it's gentle enough for large surfaces while keeping more personality than white. Dark text passes contrast easily, and it flatters photography of food, flowers and cosmetics.
What to use a pink background for
- Beauty, cosmetics and fashion branding
- Baby announcements and celebrations
- Soft, friendly marketing pages and emails
- Pastel UI themes and illustration backdrops
How to use pink in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page pink background */
body {
margin: 0;
background-color: #FFC0CB;
}
/* A single section or element */
.hero {
background-color: rgb(255, 192, 203);
} Pink shades and tints
Click any swatch to copy it. Tints mix pink with white; shades mix it with black.
Pink background FAQ
What is the hex code for pink?
The CSS keyword `pink` is #FFC0CB — rgb(255, 192, 203). For a softer variant see pastel pink #FFD1DC; for a louder one, hot pink #FF69B4.
Does pink pass WCAG contrast with dark text?
Yes — black on #FFC0CB measures about 13.7:1 and even mid-dark grays stay above AA, so it's a very forgiving background for accessible text.
What is the hex code for pink?
Pink is #FFC0CB in hexadecimal, rgb(255, 192, 203) in RGB and hsl(350, 100%, 88%) in HSL. Paste #FFC0CB into any CSS background-color property to use it.
How do I set a pink background in CSS?
Add background-color: #FFC0CB; to any element, or apply it to the whole page: body { background-color: #FFC0CB; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 192, 203) — with identical results.