Thistle #d8bfd8 Hex Color (Shades & Complementary Colors) (2025)

';document.querySelector("#main-display").insertAdjacentHTML('beforeend', output);document.querySelector("#main-display").style.backgroundColor = color.toHexString();document.querySelector("#tool-output").innerHTML = '';var output = '

';var name_display_desc = 'Hex color '+color.toHexString()+'';var name_display = null;if( htmlcolorname ){name_display_desc = htmlcolorname+' color codes';name_display = htmlcolorname;}if( colorInfo && colorInfo[color.toHexString().replace('#','')] ) {output += '

';}output += '

Color Conversions

'+name_display_desc+' converted to various formats.

';output += '

';var colorConversions = [{ name: 'Hex', value: color.toHexString() },{ name: 'RGB', value: color.toRgbString() },{ name: 'RGB Percentages', value: color.toPercentageRgbString() },{ name: 'HSL', value: color.toHslString() },{ name: 'HSV', value: color.toHsvString() },{ name: 'LCH', value: lchValue },{ name: 'LAB', value: labValue },{ name: 'LUV', value: luvValue },{ name: 'XYZ', value: xyzValue },{ name: 'Closest Tailwind Color', value: tailwindclass }];if( htmlcolornamevar ){colorConversions.push( { name: 'HTML Color Name', value: htmlcolornamevar } );}colorConversions.forEach((conversion, index) => {output += '
• '+conversion.name+' '+conversion.value+'
';});output += '

';output += '

';output += `

Color Variations

Variations of ${name_display ? name_display : 'this color'} including shaded, tints, and complementary colors.

`;var stepsPercentages = getRange(100,0,11).slice(0,-1);var shades = chroma.scale([color.toHexString(),'#ffffff']).mode('oklab').colors(11).slice(0, -1);if (true) {output += '

Brighten

Tints of the color as they brighted toward white.

';output += displayPalette(shades, {highlightColor: color});}var shades = chroma.scale([color.toHexString(),'#000000']).mode('oklab').colors(11).slice(0, -1);if (true) {output += '

Darken

Shades of the color as they darken toward black.

';output += displayPalette(shades, {highlightColor: color});}var shades = chroma.scale([color.toHexString(),'#808080']).mode('oklab').colors(11).slice(0, -1);if (true) {output += '

Desaturate

Desaturated versions of this color.

';output += displayPalette(shades, {highlightColor: color});}var stepsPercentages = getRange(-100,100,9);var shades = [];stepsPercentages.forEach(step => {shades.push(color.clone().spin(step).toHexString());});if (true) {output += '

Hue

Various hues of this color.

';output += displayPalette(shades, {highlightColor: color});}var shades = color.analogous(6).splice(0, 3);if (true) {output += '

Analogous

Analogous color palette of this color, meaning colors that are next to each other on the color wheel.

';output += displayPalette(shades, {highlightColor: color});}var shades = color.monochromatic();if (true) {output += '

Monochromatic

Monochromatic colors for this color, monochromatic colors are all of the same hue.

';output += displayPalette(shades, {highlightColor: color});}if(true){output += '

Complementary

Complementary colors for this color, complementary colors are opposites on the color wheel.

';output += displayPalette([color, color.complement()], {highlightColor: color});}var shades = color.splitcomplement();if (true) {output += '

Split Complement

Split-complementary colors which use adjacent colors of this color\'s complementary color.

';output += displayPalette(shades, {highlightColor: color});}output += '

Contrast Checker

Contrast test for this color on black and white (Open in contrast checker).

';output += `

`;output += '

';output += '

Shareable Images & Wallpapers

High-resolution images of the hex color '+name_display_desc+', perfect for sharing on social or using as a wallpaper.

';output += '

';output += '

';document.querySelector("#tool-output").insertAdjacentHTML('beforeend', output);if(color){if(typeof infScroll != 'undefined'){infScroll.destroy();}infScroll = new InfiniteScroll( '.inspiration-grid.ajax-load', {path: function() {if ( this.loadCount == 0 ) {return 'https://colorkit.co/palettes/'+color.toHexString().replace('#','')+'/';}},append: '.color-detail',history: false});infScroll.on( 'load', function( body, path, response ) {document.querySelector('.color-palettes-with-hex').style.display = "none";});infScroll.on( 'append', function( body, path, items, response ) {if(items || items.length > 1 ){document.querySelector('.color-palettes-with-hex').style.display = "block";}});};var pageURL = 'https://colorkit.co/color/'+color.toHex()+'/';var makerURL = 'https://colorkit.co/color-picker/'+color.toHex()+'/';document.querySelector("#main-display").dataset.copyurl = pageURL;window.history.replaceState(null, null, pageURL);}document.addEventListener('DOMContentLoaded', function () {startup();setColors('#d8bfd8');});