Pastel pink carries the hex code #FFD1DC, which resolves to rgb(255, 209, 220) and hsl(346, 100%, 91%). It’s red at full saturation diluted almost entirely with white, which is what “pastel” means in practice: the hue survives, the intensity doesn’t.
At 91% lightness, pastel pink reaches only 1.36:1 against white and fails every contrast requirement in the spec, while black text on it hits 15.41:1 and clears AAA. You’ll get every code format, the computed palettes, the four elements where it belongs, and the reason its direction of contrast matters more than its ratio.
What Is the Color Pastel Pink?
Pastel pink sits at 346° on the color wheel, a shade cooler than pure red at 0°, which gives it the faint blue lean that separates it from peach. No CSS keyword maps to it, so the value comes from convention rather than specification.
The full code set for #FFD1DC:
- HEX: #FFD1DC
- RGB: rgb(255, 209, 220)
- RGBA: rgba(255, 209, 220, 1)
- HSL: hsl(346, 100%, 91%)
- HSB: 346, 18, 100
- CMYK: 0, 18, 14, 0
The HSL and HSB readings look contradictory and both are correct. HSL reports 100% saturation because the hue is undiluted, while HSB reports 18% because brightness is already at maximum, and a pastel is precisely a color where those two models diverge.
Sources disagree on the value more than for most colors. Adobe and ColorHexa both list #FFD1DC, Figma uses #FFC5D3, and HTML Color Codes publishes #F8C8DC, so pin your token to a hex before the name drifts across your files.
What Makes a Color a Pastel?
A pastel is any hue pushed above roughly 85% lightness while retaining its hue identity. The definition is about position on the lightness axis, not about a specific set of colors, which is why every hue has a pastel form.
Three properties follow from that position, and each one has a design consequence:
- Low contrast against white: every pastel fails AA on light backgrounds
- High contrast against black: pastels clear AAA as text on dark surfaces
- Compressed tint range: there’s almost no room left above them
That last point catches people out. The computed tint ramp for pastel pink runs from #FFD1DC to #FFD6E0 across eight steps, a span so narrow the whole ramp is visually one color.
Shades are where the range lives. Mixing black into #FFD1DC produces #DFB7C0, #BF9DA5, #9F838A, #80686E, and downward, and that’s the only direction with usable variation.
Pastels also desaturate as they lighten in perception, not just in numbers. A pastel at 95% lightness stops reading as a hue at all and starts reading as an off-white with a cast.
How Does Pastel Pink Appear on Digital Screens?
Pastel pink behaves as a tinted white on most displays, and that governs everything about where it can be used. Its contrast against white is 1.36:1, below even light gray’s 1.5:1.
The measured values split hard by background:
- #FFD1DC on white: 1.36:1, fails everything
- #FFD1DC on black: 15.41:1, passes AAA
- Black text on #FFD1DC: 15.41:1, passes AAA
- White text on #FFD1DC: 1.36:1, fails everything
- Dark variant #BF9DA5 on white: 2.45:1, still fails AA
Direction of contrast is the whole story here. Pastel pink can’t be a foreground on white, but it makes an excellent background for dark text, which inverts the usual mental model of a “weak” color.
Screen calibration is a real risk. On a warm-calibrated display #FFD1DC drifts toward peach, while a cool display pushes it toward lilac, and neither shift is visible to the person who picked it.
Compression damages it further. JPEG artifacts concentrate in low-contrast regions, so a pastel pink surface that looked clean in the design file often shows banding in the exported asset.
What Are the Shades of Pastel Pink?
Shades come from mixing black into #FFD1DC, which drops lightness while holding hue near 346°:
- #DFB7C0
- #BF9DA5
- #9F838A
- #80686E
- #604E52
- #403437
- #201A1C
Notice how quickly the hue drains. By #80686E the color reads as a warm gray rather than a pink, because reducing lightness on a low-saturation color removes the hue faster than it does on a saturated one.
The useful step is #80686E at 5.09:1 on white, which passes AA and gives you a text color that still carries a trace of the pink family. Above it, nothing in the ramp is readable on a light background.
Tones behave the same way. Mixing gray produces #EAC4CD, #D5B6BD, #C0A8AE, and #AA9B9F, each one closer to neutral than the last.
Named neighbors cluster tightly and all fail on white:
- Pink (#FFC0CB): the CSS keyword, 1.54:1
- Light pink (#FFB6C1): deeper, 1.65:1
- Misty rose (#FFE4E1): lighter and warmer, 1.2:1
- Baby pink (#F4C2C2): warmer and less blue, 1.57:1
What UI Elements Work Best with Pastel Pink?
Pastel pink belongs on surfaces that host dark content, never on content that sits over light surfaces. The 15.41:1 ratio for black text on it is the number that decides everything, and the 1.36:1 against white is the number that rules everything else out.
That eliminates text, icons, functional borders, and any button with a white label. Four element types are where pastel pink genuinely performs.
Backgrounds and Surface Tints
Pastel pink works as a page or section background with white cards on top. The 1.36:1 separation is barely perceptible, which is exactly what you want from a layered surface, and any dark text placed directly on it clears AAA.
Use it to segment a long page. A pastel pink band behind one section signals a change of context without introducing a border or a shadow.
Keep the surrounding neutrals warm. A cool gray next to pastel pink makes the pink look dirty, while an off-white like #FFFAFB lets it read as intentional.
Tags and Category Labels
Tags suit pastel pink because they’re small, non-semantic, and need to separate categories without implying status. A #FFD1DC fill with #80686E or near-black text is fully accessible at any size.
Build a family rather than a single tag. Pastel versions of several hues at matched lightness give you a category system where no tag outranks another, which is the point of categorical color.
Never use it for status. Pastel pink carries no severity meaning, and putting it in a red-yellow-green ladder confuses the ordering.
Selected and Highlight States
Highlighting is where pastel pink outperforms almost every alternative. A #FFD1DC background behind selected text keeps that text at 15.41:1, so the highlight adds emphasis without costing legibility.
Search matches, diff additions, and inline annotations all work the same way. The reader’s eye lands on the region and the words stay fully readable.
Compare that with a saturated highlight. A #FF69B4 fill drops black text to 7.9:1 and white text to 2.65:1, so the pastel version is strictly better for this job.
Empty States and Illustrations
Empty states need to feel welcoming rather than alarming, and pastel pink is calibrated for exactly that register. Illustration fills, onboarding graphics, and zero-data placeholders all suit it.
Keep the accompanying text in near-black. The illustration can live entirely in pastels, but the instruction that tells the user what to do next needs real contrast.
What Are the Best Pastel Pink Color Palettes for UI?
Every palette below comes from rotating hue around #FFD1DC at fixed saturation and lightness. Because lightness stays at 91%, most of these schemes produce a set of pastels rather than a light-and-dark contrast pair.
Monochromatic
Monochromatic is the outlier. Holding hue at 346° and stepping lightness gives you #FFD1DC, #FF174D, and #FFD6E0, and that middle value jumps to a saturated crimson because dropping a 91% lightness by 40% lands you near the saturated core of the hue.
Treat that as the useful surprise. #FF174D is the accent your pastel palette was missing, and it shares an exact hue relationship with the base rather than being picked by eye.
Analogous
Analogous pulls neighbors 30° in each direction: #FFD1DC, #FFDDD1, and #FFD1F3. A peach and a lilac flanking the pink, all at matched lightness.
This is the classic pastel palette and its weakness is obvious. Three colors at identical lightness have no hierarchy, so pair them with a dark neutral or the layout falls flat.
Complementary
The complement sits opposite at 166°: #FFD1DC paired with #D1FFF4, a pale mint. Maximum hue separation with no contrast separation, since both sit at 91% lightness.
Use them on adjacent surfaces, not as foreground and background. Mint text on pink fails, pink text on mint fails, but a mint card beside a pink card reads clearly.
Triadic
Triadic gives you #FFD1DC, #DCFFD1, and #D1DCFF: pink, mint green, and periwinkle. This is the strongest categorical set of the five, because three distinct hues at matched lightness make an even category system.
Verify it under color vision simulation. Pastels at matched lightness converge under deuteranopia far faster than saturated hues do, since there’s little chroma left to distinguish them.
Split-Complementary
Split-complementary softens the pairing: #FFD1DC, #D1FFDD, and #D1F3FF. Pink with a mint and a pale blue, and the most flexible of the five for a full interface.
Anchor it with a near-black. Visily’s theme tools can generate the shade ladder beneath each pastel so you get the dark text partners automatically rather than mixing them by hand.
Which Colors Are Similar to Pastel Pink?
Five values sit close enough to #FFD1DC to substitute for it, and all of them fail on white for the same reason the base does:
- Figma’s pastel pink (#FFC5D3): the nearest, marginally deeper, 1.48:1 on white
- Misty rose (#FFE4E1): lighter and warmer, 1.2:1
- Pink (#FFC0CB): the CSS keyword, slightly warmer, 1.54:1
- Baby pink (#F4C2C2): noticeably warmer, less blue, 1.57:1
- Light pink (#FFB6C1): the deepest of the group, 1.65:1
Light pink is the practical substitution when a surface needs slightly more presence. At 1.65:1 it survives compression and dim screens better while staying in the pastel register.
Warmth is the real differentiator. Baby pink and misty rose lean warm while the base leans cool, and mixing the two families in one interface produces a mismatch nobody can name but everybody sees.
Which Colors Pair Best with Pastel Pink?
Near-black is pastel pink’s essential partner. At 15.41:1 it’s the only text color that works on a pastel pink surface, and every layout using this color depends on it.
Saturated accents come next, and the computed #FF174D is the natural pick. It shares the base’s exact hue, reaches 4.1:1 on white, and gives the palette the hierarchy that pastels alone can’t provide.
Deep greens and teals produce the most sophisticated pairings. A forest green at high contrast reads as considered against pastel pink, where another pastel would read as decorative.
Apply the 60-30-10 split:
- 60% pastel pink and white: surfaces, backgrounds, and cards
- 30% near-black: text, icons, and functional borders
- 10% saturated accent: buttons, links, and the one thing that needs to be clicked
Pastel pink handles the 60% slot comfortably because it never competes for attention. That’s the entire argument for it.
Which Colors Should You Avoid Pairing with Pastel Pink?
White fails hardest. At 1.36:1 a pastel pink element on white has no perceptible edge, so borders, dividers, and outlines built this way disappear on most screens.
Other pastels fail for the same reason. The computed near-clashes at #FFDAD1 and #FFD1EF sit 25° away at identical lightness, which means they differ in hue and not at all in luminance.
Silver and light gray are a specific trap. Pastels and pale neutrals tend to cancel each other out, with the pink losing its identity and the gray picking up an unintended cast.
Mid-tones sit in the awkward middle. A mid gray at #808080 reaches 4.5:1 against the base, technically passing, and still reads as muddy because neither value commits to being a foreground or a background.
Does Pastel Pink Meet Accessibility Standards?
Pastel pink fails as a foreground and passes as a background, and both statements are about the same 1.36:1 measurement. Against white it falls below the 4.5:1 body-text threshold and the 3:1 non-text floor set by the W3C.
Where it lands across the common pairings:
- #FFD1DC on white: 1.36:1, fails AA and the 3:1 non-text floor
- White on #FFD1DC: 1.36:1, fails
- Black on #FFD1DC: 15.41:1, passes AAA
- #80686E on white: 5.09:1, passes AA
- #BF9DA5 on white: 2.45:1, fails AA
The black-on-pastel result is the one to build around. Any pastel pink surface carrying dark text is compliant at every size and weight.
Color vision deficiency affects pastel pink less than saturated pinks, because there’s so little chroma to lose. Under protanopia and deuteranopia it renders as a very pale warm gray, which preserves its function as a background and destroys its function as a category marker.
That last point matters for tag systems. If pastel pink is one of several pastel category colors, verify the set under simulation, because matched-lightness pastels converge into a single tone faster than any other palette type.
How Can You Convert Pastel Pink Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same pastel differently:
- HEX #FFD1DC: the default in design files and CSS
- RGB rgb(255, 209, 220): the three channels in decimal
- RGBA rgba(255, 209, 220, 1): adds alpha, which is how most pastels get built at runtime
- HSL hsl(346, 100%, 91%): separates hue from saturation and lightness
- HSB 346, 18, 100: the picker model, reporting saturation very differently
- CMYK 0, 18, 14, 0: light magenta and yellow coverage for print
RGBA is worth singling out. Most pastels in production aren’t hand-picked hex values at all, they’re a saturated brand color at low alpha over white, and rgba(255, 23, 77, 0.18) lands close to #FFD1DC.
That approach has a catch. An alpha-based pastel changes color whenever the surface beneath it changes, so a token that looks right on white shifts on a gray card, which is why design systems should specify pastels as opaque hex values.
The HSB and HSL saturation gap is the other thing to watch. Copying “18” from a picker into an HSL declaration produces a nearly gray color, so confirm which model your tool reports before moving a number between files.
Wrapping Up
Pastel pink is a background color that carries dark text beautifully and fails at everything else. Use #FFD1DC for surfaces, tags, highlight states, and illustration fills with near-black text on top, drop to #80686E when pink has to be the text itself, and reach for the computed #FF174D when the palette needs an accent with real weight.
Stop mixing those steps by hand. Open Visily and use its AI-powered design tools to generate your pastel surface tints, the dark text partners that make them accessible, and matched component states across the whole design in one pass.
