Shades of pink

Pinks range from barely-there lavender blush (#fff0f5) to medium violet red (#c71585). These are the 8 pinks CSS gives a name, with hex codes and contrast for lettering, and each opens a 50–950 scale.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Base colour

Named shades

Or take colours from a photo

or drop it here. It never leaves your browser.

Shades

50#fff3f8White1.1 FailInk16.7 AAA
100#ffe2eeWhite1.2 FailInk15.0 AAA
200#ffc4ddWhite1.5 FailInk12.2 AAA
300#ff98c7White2.0 FailInk9.1 AAA
400#f16cadWhite2.8 FailInk6.5 AA
500#d74792White4.0 AA largeInk4.5 AA large
600#b92f7aWhite5.6 AAInk3.2 AA large
700#991a62White7.8 AAAInk2.3 Fail
800#7a004bWhite10.9 AAAInk1.7 Fail
900#5b0037White14.0 AAAInk1.3 Fail
950#3f0024White17.0 AAAInk1.1 Fail

Copy as

CSSTailwindHexJSON

Palette code

:root {
  --color-pink-50: #fff3f8;
  --color-pink-100: #ffe2ee;
  --color-pink-200: #ffc4dd;
  --color-pink-300: #ff98c7;
  --color-pink-400: #f16cad;
  --color-pink-500: #d74792;
  --color-pink-600: #b92f7a;
  --color-pink-700: #991a62;
  --color-pink-800: #7a004b;
  --color-pink-900: #5b0037;
  --color-pink-950: #3f0024;
  --color-accent-1: #ffcee2;
  --color-accent-2: #ff79ba;
  --color-accent-3: #9a0060;
  --color-accent-4: #570034;
}

At a glance

Lavender blush (lavenderblush): #fff0f5 · white text 1.10:1 (Fail), near-black text 16.40:1 (AAA); Source: w3.org, checked 2026-11
Misty rose (mistyrose): #ffe4e1 · white text 1.20:1 (Fail), near-black text 15.02:1 (AAA); Source: w3.org, checked 2026-11
Pink (pink): #ffc0cb · white text 1.53:1 (Fail), near-black text 11.76:1 (AAA); Source: w3.org, checked 2026-11
Light pink (lightpink): #ffb6c1 · white text 1.65:1 (Fail), near-black text 10.95:1 (AAA); Source: w3.org, checked 2026-11
Hot pink (hotpink): #ff69b4 · white text 2.64:1 (Fail), near-black text 6.83:1 (AA); Source: w3.org, checked 2026-11
Pale violet red (palevioletred): #db7093 · white text 3.11:1 (AA large), near-black text 5.81:1 (AA); Source: w3.org, checked 2026-11
Deep pink (deeppink): #ff1493 · white text 3.63:1 (AA large), near-black text 4.97:1 (AA); Source: w3.org, checked 2026-11
Medium violet red (mediumvioletred): #c71585 · white text 5.42:1 (AA), near-black text 3.33:1 (AA large); Source: w3.org, checked 2026-11

Give your page these colours

A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.

Make your free page

Shades of pink: what to know

This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.

Which shades of pink can carry text

White body text passes WCAG AA (4.5:1) on 1 of the 8: medium violet red (#c71585). Use these for buttons, banners and anything with white type on it.

Near-black text (#161616) passes on 7: lavender blush (#fff0f5), misty rose (#ffe4e1), pink (#ffc0cb), light pink (#ffb6c1), hot pink (#ff69b4), pale violet red (#db7093) and deep pink (#ff1493).

Most pinks want dark text

Pink is mostly a light colour, so text on it should be dark. Hot pink (#ff69b4) with white text is 2.64:1, which fails even the 3:1 WCAG allows for large text. With near-black text it's 6.83:1.

For pink text on a white page, go to the 700 step of the scale or darker, where pink turns to raspberry.

Questions

What are 10 shades of pink?

CSS names eight: lavender blush, misty rose, pink, light pink, hot pink, pale violet red, deep pink and medium violet red. Add fuchsia (#ff00ff) and orchid (#da70d6) from the purple side and you have ten.

What are the shades of pink color?

Pinks are reds and magentas at high lightness. The named ones on this page run from near-white lavender blush to medium violet red, and the generator shows 11 even steps of any pink you pick.