Shades of Pink | Colormapped

Shades of Pink color ramp

These swatches are generated from one base hue using fixed HSL lightness steps. They are computed references, not official color names.

#FFE5EA HSL lightness 95%

#FFB3C0 HSL lightness 85%

#FF8096 HSL lightness 75%

#FF4D6C HSL lightness 65%

#FF1A42 HSL lightness 55%

#E60028 HSL lightness 45%

#B3001F HSL lightness 35%

#800016 HSL lightness 25%

#4D000D HSL lightness 15%

Base reference: #FFC0CB. Use the Tints and Shades Generator when you need a ramp based on a specific project color.

Common CSS named pink colors

These CSS keywords move from very light blush-like values through saturated pinks and deeper rose-family colors.

ColorCSS keywordHEX

Lavender Blush lavenderblush #FFF0F5

Misty Rose mistyrose #FFE4E1

Pink pink #FFC0CB

Light Pink lightpink #FFB6C1

Hot Pink hotpink #FF69B4

Deep Pink deeppink #FF1493

Pale Violet Red palevioletred #DB7093

Medium Violet Red mediumvioletred #C71585

Named-color values above use the standardized CSS sRGB keywords documented by MDN. The list is curated for this color family; it is not a perceptually uniform scale.

Pink is a light red-family color, but useful pink palettes can range from nearly white blush tones to deep rose values. This ramp holds the base hue relationship steady and varies lightness so the steps can be compared consistently.

A pale pink surface and a darker pink accent can belong to the same family without having the same accessibility behavior. Check text contrast separately, especially on the lightest swatches where white text is usually a poor choice.

Useful next steps

Try a specific color in the Tints and Shades Generator, or browse other shade families.