HCHTML Color

Shades of pink

Pink ranges from soft blush tones to electric magenta. Light pinks feel gentle and playful, while hot and deep pinks are among the loudest colors a screen can show.

pink · #FFC0CB

9 pink color names

Every CSS named color in the pink family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

lavenderblush#fff0f5rgb(255 240 245)oklch(0.968 0.017 355.1)mistyrose#ffe4e1rgb(255 228 225)oklch(0.94 0.03 25.3)pink#ffc0cbrgb(255 192 203)oklch(0.868 0.074 7.1)lightpink#ffb6c1rgb(255 182 193)oklch(0.847 0.086 9.1)hotpink#ff69b4rgb(255 105 180)oklch(0.728 0.197 352)fuchsia#ff00ffrgb(255 0 255)oklch(0.702 0.322 328.4)palevioletred#db7093rgb(219 112 147)oklch(0.678 0.138 0.7)deeppink#ff1493rgb(255 20 147)oklch(0.655 0.261 356.9)mediumvioletred#c71585rgb(199 21 133)oklch(0.553 0.222 349.7)

Tailwind pink scales

The Tailwind v4 default palette families closest to pink, 50 to 950.

Using pink in a UI

Use pale pinks as surfaces and the 600–800 shades for text. Hot pink accents on a dark neutral background are a reliable way to make a single element stand out.

pink-colors.css
:root {
  --lavenderblush: oklch(0.968 0.017 355.1); /* #fff0f5 */
  --mistyrose: oklch(0.94 0.03 25.3); /* #ffe4e1 */
  --pink: oklch(0.868 0.074 7.1); /* #ffc0cb */
  --lightpink: oklch(0.847 0.086 9.1); /* #ffb6c1 */
  --hotpink: oklch(0.728 0.197 352); /* #ff69b4 */
  --fuchsia: oklch(0.702 0.322 328.4); /* #ff00ff */
  --palevioletred: oklch(0.678 0.138 0.7); /* #db7093 */
  --deeppink: oklch(0.655 0.261 356.9); /* #ff1493 */
  --mediumvioletred: oklch(0.553 0.222 349.7); /* #c71585 */
}
Generate a pink scaleBuild a palette

Frequently asked questions

What is the hex code for pink?
The CSS keyword pink is #FFC0CB, which is rgb(255 192 203) or oklch(0.868 0.074 7.1). Tailwind's pink-500 is #F6339A, a softer pink that many design systems use instead.
How many shades of pink have CSS color names?
This page lists 9 CSS named colors in the pink family, from lavenderblush (#FFF0F5) at the light end to mediumvioletred (#C71585) at the dark end. Every one can be used directly in CSS by name.
What colors go well with pink?
Pink pairs well with green, teal and gray. For a guaranteed match, open any pink shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a pink color scale for my design system?
Pick a pink you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

RedOrangeYellowGreenTealBluePurpleBrownGrayWhite