Pink Color

About pink

#FFC0CB is the CSS named color pink: a light tint of red with a slight blue lean. It is pastel rather than vivid — what many people picture as “baby pink”.

For a stronger pink, CSS has hotpink (#FF69B4) and deeppink (#FF1493). Pink is a light version of red, so its hue sits just below 360°, on the red side of the wheel.

#FFC0CB is the value of the CSS named color pink, defined in the CSS Color specification and identical in every browser.

Other colors called pink

• Hot pink (CSS) #FF69B4A brighter, more saturated pink.Copy
• Deep pink (CSS) #FF1493A vivid magenta-leaning pink.Copy

Pink shades and tints

Shades mix pink with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with pink

Color harmonies based on the hue of #FFC0CB: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Pink contrast and readability

On a pink background, black text reads best (13.65:1). Here is how pink works as a text color:

Pale pink works best as a background, badge or card color with dark text. It is too light for text on white; use deeppink or a darker rose if you need pink text.

Using pink in CSS and HTML

:root {
  --color-pink: #FFC0CB;
}

.highlight {
  background-color: var(--color-pink);
}

.banner {
  background-color: pink;
  color: #000000;
}

.label {
  color: #FFC0CB;
  border: 2px solid rgb(255, 192, 203);
}

<p style="background-color: #FFC0CB; color: #000000;">
  Pink background
</p>