Material Pink 200 #95133F

Material Design Palette

Copy-ready color values

HEX#95133F

RGBrgb(149, 19, 63)

HSLhsl(340, 77%, 33%)

HSVhsv(340, 87%, 58%)

CMYK approx.cmyk(0, 87, 58, 42)

Color value table

Format	Value	Copy
HEX	`#95133F`
RGB	`rgb(149, 19, 63)`
HSL	`hsl(340, 77%, 33%)`
HSV	`hsv(340, 87%, 58%)`
CMYK approx.	`cmyk(0, 87, 58, 42)`
CSS keyword	`material-pink-200`

Contrast and classification

DarkLightness8.60:1Contrast with white2.44:1Contrast with blackMagenta / PurpleColor family

Shade and tint preview

White 10%
#A02B52

White 30%
#B55A79

White 70%
#DFB8C5

White 90%
#F4E7EC

Black 10%
#861139

Black 30%
#680D2C

Black 70%
#2D0613

Black 90%
#0F0206

Harmony palettes

Complementary

#6AECC0

#8EF1CF

Analogous

#851349

#95183A

Triadic

#133F95

#3F9513

Split complementary

#85EFCB

#57C29D

Using Material Pink 200

Material Pink 200 works best when it is chosen with contrast, surrounding colors, and interface state in mind. Use the HEX value for static CSS, RGB when you need channel-level control, and HSL when adjusting lightness or saturation for hover states. The CMYK value is an approximate screen-to-print conversion, so print workflows should still rely on calibrated design software or a printer profile.

CSS, SCSS, and Tailwind examples

:root {
  --color-material-pink-200: #95133f;
}

.button-primary {
  background: var(--color-material-pink-200);
  color: #ffffff;
}

$material-pink-200: #95133f;

// Tailwind arbitrary value
class="bg-[#95133f] text-white"