Shades of Pink

Shades of pink include blush, rose, hot pink, deep pink, magenta, and salmon pink. A common light pink hex value is #FFC0CB. Browse named pinks below, copy HEX codes, or generate a full palette in Shade Color.

All Shades of Pink

46 named colors · one-click copy · WCAG contrast vs white/black

Shade Color

Browse named pink colors, copy a precise HEX in one click, and check WCAG contrast on white or black. Display Format only changes how values are shown — it does not build a theme scale. Turn on Preview UI to see each color as text and a button.

Pink

#FFC0CB Palette

W 1.5:1 Fail B 13.7:1 AAA

Light Pink

#FFB6C1 Palette

W 1.7:1 Fail B 12.7:1 AAA

Hot Pink

#FF69B4 Palette

W 2.6:1 Fail B 7.9:1 AAA

Deep Pink

#FF1493 Palette

W 3.6:1 Fail B 5.8:1 AA

Pale Violet Red

#DB7093 Palette

W 3.1:1 Fail B 6.8:1 AA

Medium Violet Red

#C71585 Palette

W 5.4:1 AA B 3.9:1 Fail

Orchid

#DA70D6 Palette

W 2.9:1 Fail B 7.3:1 AAA

Lavender Blush

#FFF0F5 Palette

W 1.1:1 Fail B 19.0:1 AAA

Misty Rose

#FFE4E1 Palette

W 1.2:1 Fail B 17.4:1 AAA

Rose

#FF007F Palette

W 3.8:1 Fail B 5.6:1 AA

Rose Pink

#FF66CC Palette

W 2.6:1 Fail B 8.0:1 AAA

Blush

#DE5D83 Palette

W 3.5:1 Fail B 6.0:1 AA

Carnation Pink

#FFA6C9 Palette

W 1.8:1 Fail B 11.5:1 AAA

Cherry Blossom

#FFB7C5 Palette

W 1.6:1 Fail B 12.8:1 AAA

Cotton Candy

#FFBCD9 Palette

W 1.6:1 Fail B 13.4:1 AAA

Flamingo

#FC8EAC Palette

W 2.2:1 Fail B 9.6:1 AAA

French Pink

#FD6C9E Palette

W 2.7:1 Fail B 7.8:1 AAA

Fuchsia Pink

#FF77FF Palette

W 2.2:1 Fail B 9.3:1 AAA

Raspberry

#E30B5D Palette

W 4.7:1 AA B 4.5:1 Fail

Ruby

#E0115F Palette

W 4.8:1 AA B 4.4:1 Fail

Cerise

#DE3163 Palette

W 4.4:1 Fail B 4.7:1 AA

Salmon Pink

#FF91A4 Palette

W 2.1:1 Fail B 9.8:1 AAA

Coral Pink

#F88379 Palette

W 2.5:1 Fail B 8.5:1 AAA

Tea Rose

#F4C2C2 Palette

W 1.6:1 Fail B 13.3:1 AAA

Pastel Pink

#DEA5A4 Palette

W 2.1:1 Fail B 10.0:1 AAA

Piggy Pink

#FDDDE6 Palette

W 1.3:1 Fail B 16.7:1 AAA

Princess Pink

#FF85A2 Palette

W 2.3:1 Fail B 9.1:1 AAA

Tickle Me Pink

#FC89AC Palette

W 2.3:1 Fail B 9.3:1 AAA

Ultra Pink

#FF6FFF Palette

W 2.3:1 Fail B 9.0:1 AAA

Shocking Pink

#FC0FC0 Palette

W 3.5:1 Fail B 6.0:1 AA

Persian Pink

#F77FBE Palette

W 2.4:1 Fail B 8.7:1 AAA

Mexican Pink

#E4007C Palette

W 4.6:1 AA B 4.6:1 AA

Barbie Pink

#DA1884 Palette

W 4.7:1 AA B 4.4:1 Fail

Razzmatazz

#E3256B Palette

W 4.4:1 Fail B 4.7:1 AA

Rouge

#A94064 Palette

W 5.8:1 AA B 3.6:1 Fail

Mulberry

#C54B8C Palette

W 4.4:1 Fail B 4.8:1 AA

Orchid Pink

#F2BDCD Palette

W 1.6:1 Fail B 12.9:1 AAA

Nadeshiko Pink

#F6ADC6 Palette

W 1.8:1 Fail B 11.7:1 AAA

Baker-Miller Pink

#FF91AF Palette

W 2.1:1 Fail B 9.9:1 AAA

Charm Pink

#E68FAC Palette

W 2.4:1 Fail B 8.9:1 AAA

China Pink

#DE6FA1 Palette

W 3.0:1 Fail B 6.9:1 AA

Fairy Tale

#F2C1D1 Palette

W 1.6:1 Fail B 13.3:1 AAA

Mauvelous

#EF98AA Palette

W 2.2:1 Fail B 9.7:1 AAA

Mimi Pink

#FFDAE9 Palette

W 1.3:1 Fail B 16.5:1 AAA

Parfait Pink

#F8D5E3 Palette

W 1.3:1 Fail B 15.6:1 AAA

Wild Strawberry

#FF43A4 Palette

W 3.2:1 Fail B 6.6:1 AA

Popular Shade Collections

Browse other named shade galleries, or open the Shade Color tool to generate a custom 50–950 palette.

Shades of Blue

Shades of Green

Shades of Purple

Shades of Gray

Shades of Brown

Shades of Yellow

Shades of Red

Shades of Black

About Shades of Pink

This page is a named-pink color card: objective color values and contrast labels only. Use Shade Color when you need a full 50–950 scale.

Want a full Pink theme (50–950)?

Pick one base color from the gallery above.
Click Palette on that card to open Shade Color.
The tool builds a locked-H / locked-S lightness scale (HSL algorithm) named like Pink-50 … 950.
Copy the HEX values into CSS variables for production.

Pink Shades Glossary

Each named pink lists HEX, HSL, WCAG contrast vs white/black, and copy-ready CSS / Tailwind arbitrary values. Fixed reference swatches—not trend or brand advice.

Hot Pink: #FF69B4 hsl(330, 100%, 71%) W 2.6:1 Fail B 7.9:1 AAA

CSS color: #FF69B4; Tailwind bg-[#FF69B4]
Blush: #DE5D83 hsl(342, 66%, 62%) W 3.5:1 Fail B 6.0:1 AA

CSS color: #DE5D83; Tailwind bg-[#DE5D83]
Rose: #FF007F hsl(330, 100%, 50%) W 3.8:1 Fail B 5.6:1 AA

CSS color: #FF007F; Tailwind bg-[#FF007F]
Cotton Candy: #FFBCD9 hsl(334, 100%, 87%) W 1.6:1 Fail B 13.4:1 AAA

CSS color: #FFBCD9; Tailwind bg-[#FFBCD9]
Deep Pink: #FF1493 hsl(328, 100%, 54%) W 3.6:1 Fail B 5.8:1 AA

CSS color: #FF1493; Tailwind bg-[#FF1493]
Salmon Pink: #FF91A4 hsl(350, 100%, 78%) W 2.1:1 Fail B 9.8:1 AAA

CSS color: #FF91A4; Tailwind bg-[#FF91A4]
Barbie Pink: #DA1884 hsl(327, 80%, 47%) W 4.7:1 AA B 4.4:1 Fail

CSS color: #DA1884; Tailwind bg-[#DA1884]
Pink: #FFC0CB hsl(350, 100%, 88%) W 1.5:1 Fail B 13.7:1 AAA

CSS color: #FFC0CB; Tailwind bg-[#FFC0CB]
Light Pink: #FFB6C1 hsl(351, 100%, 86%) W 1.7:1 Fail B 12.7:1 AAA

CSS color: #FFB6C1; Tailwind bg-[#FFB6C1]
Pale Violet Red: #DB7093 hsl(340, 60%, 65%) W 3.1:1 Fail B 6.8:1 AA

CSS color: #DB7093; Tailwind bg-[#DB7093]
Medium Violet Red: #C71585 hsl(322, 81%, 43%) W 5.4:1 AA B 3.9:1 Fail

CSS color: #C71585; Tailwind bg-[#C71585]
Orchid: #DA70D6 hsl(302, 59%, 65%) W 2.9:1 Fail B 7.3:1 AAA

CSS color: #DA70D6; Tailwind bg-[#DA70D6]
Lavender Blush: #FFF0F5 hsl(340, 100%, 97%) W 1.1:1 Fail B 19.0:1 AAA

CSS color: #FFF0F5; Tailwind bg-[#FFF0F5]
Misty Rose: #FFE4E1 hsl(6, 100%, 94%) W 1.2:1 Fail B 17.4:1 AAA

CSS color: #FFE4E1; Tailwind bg-[#FFE4E1]
Rose Pink: #FF66CC hsl(320, 100%, 70%) W 2.6:1 Fail B 8.0:1 AAA

CSS color: #FF66CC; Tailwind bg-[#FF66CC]
Carnation Pink: #FFA6C9 hsl(336, 100%, 83%) W 1.8:1 Fail B 11.5:1 AAA

CSS color: #FFA6C9; Tailwind bg-[#FFA6C9]
Cherry Blossom: #FFB7C5 hsl(348, 100%, 86%) W 1.6:1 Fail B 12.8:1 AAA

CSS color: #FFB7C5; Tailwind bg-[#FFB7C5]
Flamingo: #FC8EAC hsl(344, 95%, 77%) W 2.2:1 Fail B 9.6:1 AAA

CSS color: #FC8EAC; Tailwind bg-[#FC8EAC]
French Pink: #FD6C9E hsl(339, 97%, 71%) W 2.7:1 Fail B 7.8:1 AAA

CSS color: #FD6C9E; Tailwind bg-[#FD6C9E]
Fuchsia Pink: #FF77FF hsl(300, 100%, 73%) W 2.2:1 Fail B 9.3:1 AAA

CSS color: #FF77FF; Tailwind bg-[#FF77FF]
Raspberry: #E30B5D hsl(337, 91%, 47%) W 4.7:1 AA B 4.5:1 Fail

CSS color: #E30B5D; Tailwind bg-[#E30B5D]
Ruby: #E0115F hsl(337, 86%, 47%) W 4.8:1 AA B 4.4:1 Fail

CSS color: #E0115F; Tailwind bg-[#E0115F]
Cerise: #DE3163 hsl(343, 72%, 53%) W 4.4:1 Fail B 4.7:1 AA

CSS color: #DE3163; Tailwind bg-[#DE3163]
Coral Pink: #F88379 hsl(5, 90%, 72%) W 2.5:1 Fail B 8.5:1 AAA

CSS color: #F88379; Tailwind bg-[#F88379]
Tea Rose: #F4C2C2 hsl(0, 69%, 86%) W 1.6:1 Fail B 13.3:1 AAA

CSS color: #F4C2C2; Tailwind bg-[#F4C2C2]
Pastel Pink: #DEA5A4 hsl(1, 47%, 76%) W 2.1:1 Fail B 10.0:1 AAA

CSS color: #DEA5A4; Tailwind bg-[#DEA5A4]
Piggy Pink: #FDDDE6 hsl(343, 89%, 93%) W 1.3:1 Fail B 16.7:1 AAA

CSS color: #FDDDE6; Tailwind bg-[#FDDDE6]
Princess Pink: #FF85A2 hsl(346, 100%, 76%) W 2.3:1 Fail B 9.1:1 AAA

CSS color: #FF85A2; Tailwind bg-[#FF85A2]
Tickle Me Pink: #FC89AC hsl(342, 95%, 76%) W 2.3:1 Fail B 9.3:1 AAA

CSS color: #FC89AC; Tailwind bg-[#FC89AC]
Ultra Pink: #FF6FFF hsl(300, 100%, 72%) W 2.3:1 Fail B 9.0:1 AAA

CSS color: #FF6FFF; Tailwind bg-[#FF6FFF]
Shocking Pink: #FC0FC0 hsl(315, 98%, 52%) W 3.5:1 Fail B 6.0:1 AA

CSS color: #FC0FC0; Tailwind bg-[#FC0FC0]
Persian Pink: #F77FBE hsl(329, 88%, 73%) W 2.4:1 Fail B 8.7:1 AAA

CSS color: #F77FBE; Tailwind bg-[#F77FBE]
Mexican Pink: #E4007C hsl(327, 100%, 45%) W 4.6:1 AA B 4.6:1 AA

CSS color: #E4007C; Tailwind bg-[#E4007C]
Razzmatazz: #E3256B hsl(338, 77%, 52%) W 4.4:1 Fail B 4.7:1 AA

CSS color: #E3256B; Tailwind bg-[#E3256B]
Rouge: #A94064 hsl(339, 45%, 46%) W 5.8:1 AA B 3.6:1 Fail

CSS color: #A94064; Tailwind bg-[#A94064]
Mulberry: #C54B8C hsl(328, 51%, 53%) W 4.4:1 Fail B 4.8:1 AA

CSS color: #C54B8C; Tailwind bg-[#C54B8C]
Orchid Pink: #F2BDCD hsl(342, 67%, 85%) W 1.6:1 Fail B 12.9:1 AAA

CSS color: #F2BDCD; Tailwind bg-[#F2BDCD]
Nadeshiko Pink: #F6ADC6 hsl(339, 80%, 82%) W 1.8:1 Fail B 11.7:1 AAA

CSS color: #F6ADC6; Tailwind bg-[#F6ADC6]
Baker-Miller Pink: #FF91AF hsl(344, 100%, 78%) W 2.1:1 Fail B 9.9:1 AAA

CSS color: #FF91AF; Tailwind bg-[#FF91AF]
Charm Pink: #E68FAC hsl(340, 64%, 73%) W 2.4:1 Fail B 8.9:1 AAA

CSS color: #E68FAC; Tailwind bg-[#E68FAC]
China Pink: #DE6FA1 hsl(333, 63%, 65%) W 3.0:1 Fail B 6.9:1 AA

CSS color: #DE6FA1; Tailwind bg-[#DE6FA1]
Fairy Tale: #F2C1D1 hsl(340, 65%, 85%) W 1.6:1 Fail B 13.3:1 AAA

CSS color: #F2C1D1; Tailwind bg-[#F2C1D1]
Mauvelous: #EF98AA hsl(348, 73%, 77%) W 2.2:1 Fail B 9.7:1 AAA

CSS color: #EF98AA; Tailwind bg-[#EF98AA]
Mimi Pink: #FFDAE9 hsl(336, 100%, 93%) W 1.3:1 Fail B 16.5:1 AAA

CSS color: #FFDAE9; Tailwind bg-[#FFDAE9]
Parfait Pink: #F8D5E3 hsl(336, 71%, 90%) W 1.3:1 Fail B 15.6:1 AAA

CSS color: #F8D5E3; Tailwind bg-[#F8D5E3]
Wild Strawberry: #FF43A4 hsl(329, 100%, 63%) W 3.2:1 Fail B 6.6:1 AA

CSS color: #FF43A4; Tailwind bg-[#FF43A4]

FAQ

How to use this page?

Copy a HEX code or open any shade in Shade Color for a complete tint-and-shade set.

What is the most popular shade of pink?

Hot pink is the breakout popular pink for marketing and fashion accents because it stays vivid on screens and print.

What is the base pink HEX value?

The reference base pink on this page uses #FFC0CB. Use it as a starting seed in Shade Color, or pick any named swatch above as your base.

How do I turn a swatch into a full UI theme?

Click Palette on one gallery card. Shade Color locks hue and saturation, then varies lightness into tokens like Pink-50 through Pink-950 for CSS variables.

What do the W / B contrast labels mean?

Each card shows WCAG 2.x contrast for this color used as text on white (W) and text on black (B). AA means at least 4.5:1 (normal text); AAA means at least 7:1. Fail means below 4.5:1 — still fine for large decorative areas, but avoid for small body text.

What does Preview UI show?

Turn on Preview UI to see the color as text on white/black and as a simple button sample. It is a quick accessibility and context check—not a full design system.

Why use this gallery instead of sampling from a screenshot?

Named colors here use fixed HEX values, so you avoid compression and display-profile drift from screenshots. Copy the code once, then reuse it consistently in CSS or design tokens. For a full 50–950 CSS variable block, open Palette on a card and use Copy CSS in Shade Color.