Shades of Pink: Names, HEX & RGB Codes
Pinks are tints of red and magenta, from barely-there lavender blush to vivid deep pink. Here are the CSS named pinks with exact codes and readable text colors.
8 named pink colors in CSS
Every name below works directly in CSS (for example color: hotpink;). Values are from the CSS Color Module Level 4 list; the last column shows whether white or black text has more contrast on that color, and the exact WCAG ratio.
| Name | HEX | RGB | HSL | Best text color | |
|---|---|---|---|---|---|
Lavender Blushlavenderblush | #FFF0F5 | rgb(255, 240, 245) | hsl(340, 100%, 97%) | black text, 19.03:1 | |
Misty Rosemistyrose | #FFE4E1 | rgb(255, 228, 225) | hsl(6, 100%, 94%) | black text, 17.43:1 | |
Pinkpink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | black text, 13.65:1 | |
Light Pinklightpink | #FFB6C1 | rgb(255, 182, 193) | hsl(351, 100%, 86%) | black text, 12.71:1 | |
Hot Pinkhotpink | #FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) | black text, 7.93:1 | |
Pale Violet Redpalevioletred | #DB7093 | rgb(219, 112, 147) | hsl(340, 60%, 65%) | black text, 6.75:1 | |
Deep Pinkdeeppink | #FF1493 | rgb(255, 20, 147) | hsl(328, 100%, 54%) | black text, 5.77:1 | |
Medium Violet Redmediumvioletred | #C71585 | rgb(199, 21, 133) | hsl(322, 81%, 43%) | white text, 5.42:1 |
Pink tint & shade scale
A ten-step scale built from hotpink (#FF69B4). Need a scale for your own color? Use the tints, shades & tones generator.
Tints (mixed with white) on the left, shades (mixed with black) on the right. Click a swatch to copy it.
Using pink in design
Light pinks like mistyrose (#FFE4E1) and lavenderblush (#FFF0F5) work as gentle backgrounds behind dark text. For pink text or buttons with white text, go as dark as mediumvioletred (#C71585), which reaches 5.42:1 on white.
A palette to start from
More ideas: pastel revival trend, spring 2026 palettes, or check any pair in the contrast checker.