CSS Named Color
Copy-ready color values
HEX
#D8BFD8RGB
rgb(216, 191, 216)HSL
hsl(300, 24%, 80%)HSV
hsv(300, 12%, 85%)CMYK approx.
cmyk(0, 12, 0, 15)Color value table
| Format | Value | Copy |
|---|---|---|
| HEX | #D8BFD8 | |
| RGB | rgb(216, 191, 216) | |
| HSL | hsl(300, 24%, 80%) | |
| HSV | hsv(300, 12%, 85%) | |
| CMYK approx. | cmyk(0, 12, 0, 15) | |
| CSS keyword | thistle |
Contrast and classification
LightLightness1.70:1Contrast with white12.36:1Contrast with blackMagenta / PurpleColor family
Shade and tint preview
White 10%#DCC5DC
White 30%#E4D2E4
White 70%#F3ECF3
White 90%#FBF9FB
Black 10%#C2ACC2
Black 30%#978697
Black 70%#413941
Black 90%#161316
Harmony palettes
Complementary
#274027#5B6E5BAnalogous
#D5BFD8#D8C2D5Triadic
#BFD8D8#D8D8BFSplit complementary
#4E624E#203420Using Thistle
Thistle 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-thistle: #d8bfd8;
}
.button-primary {
background: var(--color-thistle);
color: #000000;
}
$thistle: #d8bfd8;
// Tailwind arbitrary value
class="bg-[#d8bfd8] text-white"