Color family
Pink Colors: Names, HEX Codes & Shades
Pink is a light or bright red-purple, found at hue angles of roughly 315° to 350° and, in its lighter tints, around red. This library files light reds under pink, along with rose, hot pink and deep pink.
Pale pinks are very light, so they need dark text: pink (#FFC0CB) has a contrast ratio of just 1.53:1 with white but 13.65:1 with black. Hot pink (#FF69B4) sits in between, with 2.64:1 against white and 7.93:1 against black, so black text works better than white.
Pink colors at a glance
| Extreme | Color | HEX | HSL |
|---|---|---|---|
| Lightest | Very Light Pink | #FFF4F2 | hsl(9, 100%, 97%) |
| Darkest | Wine | #80013F | hsl(331, 98%, 25%) |
| Most saturated | Very Light Pink | #FFF4F2 | hsl(9, 100%, 97%) |
| Least saturated | Mauve | #AE7181 | hsl(344, 27%, 56%) |
Popular pink colors
Using pink colors
- Soft backgrounds and cards, using a pale pink with dark text.
- Accent colors and buttons, where a saturated pink such as deep pink stands out on white or dark pages.
- Fashion, beauty and event designs.
- Highlights on dark pages, where a bright pink has high contrast.
For readable buttons, pair a saturated pink with black or very dark text, or darken the pink until white text reaches 4.5:1.
Light pinks are easy to lose on white. Add a border or a deeper pink edge to cards and form fields so they meet the 3:1 contrast WCAG suggests for interface components.