Shades of pink
Pink is a light or desaturated red. It ranges from pale baby and cherry-blossom pinks to vivid hot pink, cerise and raspberry. Below: 23 named shades with hex codes — tap a chip to copy it.
6 light · 17 medium · 0 dark · 2 pass AA as text on white
- Misty Rose#FFE4E1
- Pink#FFC0CB
- Baby pink#F4C2C2
- Cherry blossom pink#FFB7C5
- Light Pink#FFB6C1
- Carnation pink#FFA6C9
- Amaranth pink#F19CBB
- Salmon pink#FF91A4
- Dark Salmon#E9967A
- Coral#FF7F50
- Salmon#FA8072
- Hot Pink#FF69B4
- Light Coral#F08080
- Puce#CC8899
- Rosy Brown#BC8F8F
- Thulian pink#DE6FA1
- Pale Violet Red#DB7093
- Deep Pink#FF1493
- Blush#DE5D83
- Rose#FF007F
- Cerise#DE3163
- Raspberry#E30B5C
- Medium Violet Red#C71585
Pink color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| Misty RoseCSS | #FFE4E1 | rgb(255, 228, 225) | hsl(6 100% 94%) | (0%, 11%, 12%, 0%) | 1.20:1 | 17.43:1 |
| PinkCSS | #FFC0CB | rgb(255, 192, 203) | hsl(350 100% 88%) | (0%, 25%, 20%, 0%) | 1.53:1 | 13.65:1 |
| Baby pink | #F4C2C2 | rgb(244, 194, 194) | hsl(0 69% 86%) | (0%, 20%, 20%, 4%) | 1.57:1 | 13.34:1 |
| Cherry blossom pink | #FFB7C5 | rgb(255, 183, 197) | hsl(348 100% 86%) | (0%, 28%, 23%, 0%) | 1.63:1 | 12.83:1 |
| Light PinkCSS | #FFB6C1 | rgb(255, 182, 193) | hsl(351 100% 86%) | (0%, 29%, 24%, 0%) | 1.65:1 | 12.71:1 |
| Carnation pink | #FFA6C9 | rgb(255, 166, 201) | hsl(336 100% 83%) | (0%, 35%, 21%, 0%) | 1.81:1 | 11.54:1 |
| Amaranth pink | #F19CBB | rgb(241, 156, 187) | hsl(338 75% 78%) | (0%, 35%, 22%, 5%) | 2.05:1 | 10.21:1 |
| Salmon pink | #FF91A4 | rgb(255, 145, 164) | hsl(350 100% 78%) | (0%, 43%, 36%, 0%) | 2.13:1 | 9.83:1 |
| Dark SalmonCSS | #E9967A | rgb(233, 150, 122) | hsl(15 72% 70%) | (0%, 36%, 48%, 9%) | 2.30:1 | 9.10:1 |
| CoralCSS | #FF7F50 | rgb(255, 127, 80) | hsl(16 100% 66%) | (0%, 50%, 69%, 0%) | 2.49:1 | 8.40:1 |
| SalmonCSS | #FA8072 | rgb(250, 128, 114) | hsl(6 93% 71%) | (0%, 49%, 54%, 2%) | 2.50:1 | 8.39:1 |
| Hot PinkCSS | #FF69B4 | rgb(255, 105, 180) | hsl(330 100% 71%) | (0%, 59%, 29%, 0%) | 2.64:1 | 7.93:1 |
| Light CoralCSS | #F08080 | rgb(240, 128, 128) | hsl(0 79% 72%) | (0%, 47%, 47%, 6%) | 2.59:1 | 8.10:1 |
| Puce | #CC8899 | rgb(204, 136, 153) | hsl(345 40% 67%) | (0%, 33%, 25%, 20%) | 2.78:1 | 7.54:1 |
| Rosy BrownCSS | #BC8F8F | rgb(188, 143, 143) | hsl(0 25% 65%) | (0%, 24%, 24%, 26%) | 2.81:1 | 7.46:1 |
| Thulian pink | #DE6FA1 | rgb(222, 111, 161) | hsl(333 63% 65%) | (0%, 50%, 27%, 13%) | 3.04:1 | 6.89:1 |
| Pale Violet RedCSS | #DB7093 | rgb(219, 112, 147) | hsl(340 60% 65%) | (0%, 49%, 33%, 14%) | 3.11:1 | 6.75:1 |
| Deep PinkCSS | #FF1493 | rgb(255, 20, 147) | hsl(328 100% 54%) | (0%, 92%, 42%, 0%) | 3.63:1 | 5.77:1 |
| Blush | #DE5D83 | rgb(222, 93, 131) | hsl(342 66% 62%) | (0%, 58%, 41%, 13%) | 3.50:1 | 5.99:1 |
| Rose | #FF007F | rgb(255, 0, 127) | hsl(330 100% 50%) | (0%, 100%, 50%, 0%) | 3.77:1 | 5.55:1 |
| Cerise | #DE3163 | rgb(222, 49, 99) | hsl(343 72% 53%) | (0%, 78%, 55%, 13%) | 4.44:1 | 4.72:1 |
| Raspberry | #E30B5C | rgb(227, 11, 92) | hsl(338 91% 47%) | (0%, 95%, 59%, 11%) | 4.69:1 | 4.46:1 |
| Medium Violet RedCSS | #C71585 | rgb(199, 21, 133) | hsl(322 81% 43%) | (0%, 89%, 33%, 22%) | 5.42:1 | 3.87:1 |
Make your own shades of pink
Pick any pink and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using pink in design
Soft pinks make friendly backgrounds; saturated pinks work as accents. Very few pinks reach 4.5:1 on white, so pair them with a dark ink for text.
To pair it with other hues, start from the color wheel or see colors that go with pink. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of pink are there?
There is no fixed number: screens can show millions of colors and any pink hue can be made lighter, darker or more muted. This page lists 23 named shades of pink — the CSS named colors that fall in the pink family plus widely used names such as baby pink, blush, rose.
What is the hex code for pink?
There is no single official pink. The CSS keyword "pink" is #FFC0CB; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of pink?
In this list the lightest is Misty Rose (#FFE4E1) and the darkest is Medium Violet Red (#C71585), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of pink are readable as text on white?
2 of the 23 shades reach the WCAG AA ratio of 4.5:1 on white, for example Raspberry (#E30B5C), Medium Violet Red (#C71585). Use the "On white" column in the table, or check any pair in the contrast checker.
What colors go with pink?
See the palettes on our "colors that go with pink" page: complementary, analogous and neutral pairings with hex codes.
What is the difference between a shade, a tint and a tone of pink?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of pink" means every variation of the hue, which is how this page uses it.