LCH vs HSL colors for the same lightness

dabblet.css

/**
 * LCH vs HSL colors for the same lightness
 */

div {
	width: 100%;
	height: 6em;
	background: linear-gradient(to right, var(--stops));
	--stops: gray, gray;
	--l: 50%;
}

.hsl {
	--s: 100%;
	--stops: hsl(0 var(--s) var(--l)),
	         hsl(60 var(--s) var(--l)),
	         hsl(120 var(--s) var(--l)),
	         hsl(180 var(--s) var(--l)),
	         hsl(240 var(--s) var(--l)),
	         hsl(300 var(--s) var(--l));
}

.lch {
	--c: 100;
	--stops: lch(var(--l) var(--c) 0),
	         lch(var(--l) var(--c) 60),
	         lch(var(--l) var(--c) 120),
	         lch(var(--l) var(--c) 180),
	         lch(var(--l) var(--c) 240),
	         lch(var(--l) var(--c) 300);
}

dabblet.html

<div class="hsl"></div>
<div class="lch"></div>

dabblet.js

// alert('Hello world!');

settings.json

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