18 Shades of Pink with Hex Codes

Named Pink Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

Pink Color Chart: Hex, RGB, HSL & CMYK

Every pink above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Pink Scale from Light to Dark

A 12-step lightness scale built from the core pink hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate pink design tokens.

What Pink Communicates

Pink has shifted a long way from its mid-century gendered coding. Muted dusty roses read as sophisticated and are common in editorial and interior palettes; hot pink and magenta read as confident and contemporary, and are used deliberately by brands wanting to look unafraid. Very pale pinks fail text contrast almost universally and belong in backgrounds.

Where pink works well

• Beauty, fashion, and lifestyle brands across the full range
• High-energy accents when magenta is used against dark neutrals
• Warm, soft backgrounds using blush tones below about 15% saturation
• Charts needing a warm hue that stays distinct from red for most viewers

Colors that pair with pink

Copy the Pink Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --pink-mediumvioletred: #C71585;
  --pink-fuchsia-rose: #C74375;
  --pink-punch: #DC4C4C;
  --pink-rose-gold: #B76E79;
  --pink-deeppink: #FF1493;
  --pink-blush: #DE5D83;
  --pink-magenta: #FF00FF;
  --pink-palevioletred: #DB7093;
  --pink-hotpink: #FF69B4;
  --pink-coral-pink: #F88379;
  --pink-dusty-rose: #DCAE96;
  --pink-lightpink: #FFB6C1;
  --pink-baby-pink: #F4C2C2;
  --pink-pink: #FFC0CB;
  --pink-bubblegum: #FFC1CC;
  --pink-millennial-pink: #F3CFC6;
  --pink-mistyrose: #FFE4E1;
  --pink-lavenderblush: #FFF0F5;
}

Pink Color Questions