Converting between colors with filters

dabblet.css

/**
 * Converting between colors with filters
 */

div div {
	width: 200px;
	height: 200px;
	background: var(--color);
	xfilter: grayscale() brightness(10000%);
}

body > div {
	display: flex;
}

.fake div {
	background: red;
}

.fake div:nth-child(1) {
	filter: hue-rotate(81deg) saturate(43%) brightness(241%);
}

.fake div:nth-child(2) {
	filter: hue-rotate(187deg) brightness(185%) saturate(69%);
}

.fake div:nth-child(3) {
	filter: grayscale(100%) brightness(299%);
}

dabblet.html

<div>
<div style="--color: #75AF26; /* HSB: 85, 78%, 69% */"></div>
<div style="--color: #15B6D2 /* HSB: 189, 90%, 82% */"></div>
<div style="--color: hsl(0, 0%, 63%)"></div>
</div>

<div class="fake">
<div></div>
<div></div>
<div></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}