Shades of Pink: Color Names & Hex Codes
There are 8 CSS named colors in the pink range, from the lightest, Lavender Blush, to the darkest, Medium Violet Red. Each one below has its exact hex and RGB code, the text color that reads best on it, and a full page with palettes and matching colors.
Pink Color Chart
Ordered from lightest to darkest by relative luminance. Click a name for its full color page.
Light, Mid-tone and Dark Shades of Pink
Light shades of pink
Pale enough to work as backgrounds. Black text has the higher contrast on all 4 of them. Lavender Blush, Misty Rose, Pink and Light Pink.
Mid-tone shades of pink
Mid-tones for accents, buttons and illustrations. Check the table below before choosing a text color. Black text has the higher contrast on all 3 of them. Hot Pink, Pale Violet Red and Deep Pink.
Dark shades of pink
Deep tones for headers, buttons and bold brand color. White text has the higher contrast on this color. Medium Violet Red.
Pink Hex Codes and Contrast
Contrast ratios follow WCAG 2.2: 4.5:1 is the minimum for body text, 3:1 for large text.
| Color | HEX | RGB | HSL | On black | On white | Best text |
|---|---|---|---|---|---|---|
#FFF0F5 | rgb(255, 240, 245) | hsl(340, 100%, 97%) | 19.03:1 | 1.1:1 | Black | |
#FFE4E1 | rgb(255, 228, 225) | hsl(6, 100%, 94%) | 17.44:1 | 1.2:1 | Black | |
#FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | 13.65:1 | 1.54:1 | Black | |
#FFB6C1 | rgb(255, 182, 193) | hsl(351, 100%, 86%) | 12.71:1 | 1.65:1 | Black | |
#FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) | 7.93:1 | 2.65:1 | Black | |
#DB7093 | rgb(219, 112, 147) | hsl(340, 60%, 65%) | 6.75:1 | 3.11:1 | Black | |
#FF1493 | rgb(255, 20, 147) | hsl(328, 100%, 54%) | 5.77:1 | 3.64:1 | Black | |
#C71585 | rgb(199, 21, 133) | hsl(322, 81%, 43%) | 3.87:1 | 5.42:1 | White |
Shades of Pink FAQ
What are the shades of pink in CSS?
CSS Color 4 does not group its named colors into families, but 8 of them fall in the pink range. From lightest to darkest: Lavender Blush (#FFF0F5), Misty Rose (#FFE4E1), Pink (#FFC0CB), Light Pink (#FFB6C1), Hot Pink (#FF69B4), Pale Violet Red (#DB7093), Deep Pink (#FF1493) and Medium Violet Red (#C71585).
What is the hex code for pink?
The CSS named color pink is #FFC0CB, which is RGB(255, 192, 203). The other shades on this page each have their own code.
Which shade of pink can I use for text on a white background?
Medium Violet Red is the only one of these shades with at least 4.5:1 contrast on white, the WCAG AA minimum for body text. Medium Violet Red reaches 5.42:1.
Are baby pink, blush and dusty rose CSS colors?
No. Baby pink, blush, rose pink and dusty rose are common names, not CSS named colors, so each has no single standard hex code. The closest standard alternatives are Pink (#FFC0CB) for pale pinks and Pale Violet Red (#DB7093) for muted, dusty rose tones.
Sources: W3C CSS Color Module Level 4 (named colors and values); WCAG 2.2 (relative luminance and contrast formula).