Hot Pink Background
#FF69B4 · rgb(255, 105, 180)
About the hot pink background
Hot pink (#FF69B4) is pink with its saturation cranked — rgb(255, 105, 180). It's loud, playful and unapologetic: the color of pop culture, 80s revival and bold personal brands.
Used full-screen it makes a statement, so most designs either commit fully (black text, minimal layout) or deploy it as an accent band. Either way it's memorable — nobody confuses a hot pink page with a competitor's.
What to use a hot pink background for
- Bold personal brands and creator sites
- Pop, music and event promotion
- Playful call-to-action buttons and badges
- 80s/Y2K retro design palettes
How to use hot pink in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page hot pink background */
body {
margin: 0;
background-color: #FF69B4;
}
/* A single section or element */
.hero {
background-color: rgb(255, 105, 180);
} Hot Pink shades and tints
Click any swatch to copy it. Tints mix hot pink with white; shades mix it with black.
Hot Pink background FAQ
What is hot pink's hex code?
The CSS keyword `hotpink` is #FF69B4 — rgb(255, 105, 180), or hsl(330, 100%, 71%). It's fully saturated, so any hex variation lives at 100% S with different lightness.
What text is readable on hot pink?
Black on #FF69B4 measures about 7.9:1 — past even WCAG AAA. White measures only about 2.7:1, which fails all text requirements, so stick with dark type on this background.
What is the hex code for hot pink?
Hot Pink is #FF69B4 in hexadecimal, rgb(255, 105, 180) in RGB and hsl(330, 100%, 71%) in HSL. Paste #FF69B4 into any CSS background-color property to use it.
How do I set a hot pink background in CSS?
Add background-color: #FF69B4; to any element, or apply it to the whole page: body { background-color: #FF69B4; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 105, 180) — with identical results.