CSS Named Color
Copy-ready color values
HEX
#DB7093RGB
rgb(219, 112, 147)HSL
hsl(340, 60%, 65%)HSV
hsv(340, 49%, 86%)CMYK approx.
cmyk(0, 49, 33, 14)Color value table
| Format | Value | Copy |
|---|---|---|
| HEX | #DB7093 | |
| RGB | rgb(219, 112, 147) | |
| HSL | hsl(340, 60%, 65%) | |
| HSV | hsv(340, 49%, 86%) | |
| CMYK approx. | cmyk(0, 49, 33, 14) | |
| CSS keyword | palevioletred |
Contrast and classification
LightLightness3.11:1Contrast with white6.75:1Contrast with blackMagenta / PurpleColor family
Shade and tint preview
White 10%#DF7E9E
White 30%#E69BB3
White 70%#F4D4DF
White 90%#FBF1F4
Black 10%#C56584
Black 30%#994E67
Black 70%#42222C
Black 90%#160B0F
Harmony palettes
Complementary
#248F6C#59AA8FAnalogous
#CE709C#DB748FTriadic
#7093DB#93DB70Split complementary
#4BA386#1E7559Using Palevioletred
Palevioletred 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-palevioletred: #db7093;
}
.button-primary {
background: var(--color-palevioletred);
color: #000000;
}
$palevioletred: #db7093;
// Tailwind arbitrary value
class="bg-[#db7093] text-white"