CodePen Embed - LCH and HSL colors

<!--Colors coverted using Lea Verou’s LCH coverter https://css.land/lch/-->
<div class="main-wrapper">
	<header>
		<h1>Comparing LCH and HSL colors</h1>
		<button data-toggle hidden role="switch" checked="false">
			Grayscale<span data-text aria-hidden>: Off</span>
		</button>
	</header>
	<div class="grid">
		<div class="wrapper">
			<h2>LCH</h2>
			<section>
				<h3>Lightness</h3>
				<div class="color-strip-wrapper">
					<ol class="color-strip color-strip--lightness">
						<li><p>0%</p></li>
						<li><p>10%</p></li>
						<li><p>20%</p></li>
						<li><p>30%</p></li>
						<li><p>40%</p></li>
						<li><p>50%</p></li>
						<li><p>60%</p></li>
						<li><p>70%</p></li>
						<li><p>80%</p></li>
						<li><p>90%</p></li>
						<li><p>100%</p></li>
					</ol>
				</div>
			</section>

			<section>
				<h3>Chroma</h3>
				<div class="color-strip-wrapper">
					<ol class="color-strip color-strip--chroma">
						<li><p>0</p></li>
						<li><p>10</p></li>
						<li><p>20</p></li>
						<li><p>30</p></li>
						<li><p>40</p></li>
						<li><p>50</p></li>
						<li><p>60</p></li>
						<li><p>70</p></li>
						<li><p>80</p></li>
						<li><p>90</p></li>
						<li><p>100</p></li>
					</ol>
				</div>
			</section>

			<section>
				<h3>Hue</h3>
				<div class="color-strip-wrapper">
					<ol class="color-strip color-strip--hue">
						<li><p>0</p></li>
						<li><p>36</p></li>
						<li><p>72</p></li>
						<li><p>108</p></li>
						<li><p>144</p></li>
						<li><p>180</p></li>
						<li><p>216</p></li>
						<li><p>252</p></li>
						<li><p>288</p></li>
						<li><p>324</p></li>
						<li><p>360</p></li>
					</ol>
				</div>
			</section>
		</div>

		<div class="wrapper">
			<h2>HSL</h2>
			<section>
				<h3>Hue</h3>
				<div class="color-strip-wrapper color-strip-wrapper--hsl">
					<ol class="color-strip color-strip--hue">
						<li><p>0</p></li>
						<li><p>36</p></li>
						<li><p>72</p></li>
						<li><p>108</p></li>
						<li><p>144</p></li>
						<li><p>180</p></li>
						<li><p>216</p></li>
						<li><p>252</p></li>
						<li><p>288</p></li>
						<li><p>324</p></li>
						<li><p>360</p></li>
					</ol>
				</div>
			</section>

			<section>
				<h3>Saturation</h3>
				<div class="color-strip-wrapper color-strip-wrapper--hsl">
					<ol class="color-strip color-strip--saturation">
						<li><p>0%</p></li>
						<li><p>10%</p></li>
						<li><p>20%</p></li>
						<li><p>30%</p></li>
						<li><p>40%</p></li>
						<li><p>50%</p></li>
						<li><p>60%</p></li>
						<li><p>70%</p></li>
						<li><p>80%</p></li>
						<li><p>90%</p></li>
						<li><p>100%</p></li>
					</ol>
				</div>
			</section>

			<section>
				<h3>Lightness</h3>
				<div class="color-strip-wrapper color-strip-wrapper--hsl">
					<ol class="color-strip color-strip--lightness-hsl">
						<li><p>0%</p></li>
						<li><p>10%</p></li>
						<li><p>20%</p></li>
						<li><p>30%</p></li>
						<li><p>40%</p></li>
						<li><p>50%</p></li>
						<li><p>60%</p></li>
						<li><p>70%</p></li>
						<li><p>80%</p></li>
						<li><p>90%</p></li>
						<li><p>100%</p></li>
					</ol>
				</div>
			</section>
		</div>
	</div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: Helvetica, sans-serif;
	margin: 0;
	padding: 1rem;
	min-height: 100vh;
	
	&.is-grayscale {
		.grid {
			filter: grayscale(100%);
		}
	}
}

.main-wrapper {
	max-width: 115rem;
	margin: 0 auto;
}

button {
	margin-bottom: 1rem;
	font-size: 1.2rem;
	padding: 0.5rem 1rem;
	border-radius: 0.4rem;
	border: none;
	background: darkslategray;
	color: #ffffff;
	min-width: 12rem;
	
	span {
		pointer-events: none;
	}
	
	&:hover,
	&:focus {
		background: slategray;
	}
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr));
	gap: 1rem;
	justify-content: center;
}

.wrapper {
	padding: max(1rem, 2vw);
	background: rgba(240, 240, 240);
	border-radius: 0.5rem;
	max-width: 60rem;
}

section + section {
	margin-top: 2rem;
}

.color-strip-wrapper {
	max-width: 100%;
	overflow-x: auto;
}

.color-strip {
	--c0: rgb(0% 0% 0%);
	--c1: rgb(0% 10.28% 27.62%);
	--c2: rgb(0% 18.2% 44.24%);
	--c3: rgb(15.43% 26.8% 54.94%);
	--c4: rgb(26.84% 35.94% 65.43%);
	--c5: rgb(37.58% 45.53% 76.21%);
	--c6: rgb(48.28% 55.51% 87.27%);
	--c7: rgb(59.1% 65.83% 98.58%);
	--c8: rgb(73.36% 76.85% 100%);
	--c9: rgb(86.98% 88.27% 100%);
	--c10: rgb(100% 100% 100%);
	
	width: max(50rem, 100%);
	height: 5rem;
	display: flex;
	margin: 0;
	padding: 0;
	
	> li {
		--color: var(--c0);
		width: calc(100% / 11);
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--color);
		
		&:nth-child(2) { --i: 1; }
		&:nth-child(3) { --i: 2; }
		&:nth-child(4) { --i: 3; }
		&:nth-child(5) { --i: 4; }
		&:nth-child(6) { --i: 5; }
		&:nth-child(7) { --i: 6; }
		&:nth-child(8) { --i: 7; }
		&:nth-child(9) { --i: 8; }
		&:nth-child(10) { --i: 9; }
		&:nth-child(11) { --i: 10; }
		
		&:nth-child(2) { --color: var(--c1); }
		&:nth-child(3) { --color: var(--c2); }
		&:nth-child(4) { --color: var(--c3); }
		&:nth-child(5) { --color: var(--c4); }
		&:nth-child(6) { --color: var(--c5); }
		&:nth-child(7) { --color: var(--c6); }
		&:nth-child(8) { --color: var(--c7); }
		&:nth-child(9) { --color: var(--c8); }
		&:nth-child(10) { --color: var(--c9); }
		&:nth-child(11) { --color: var(--c10); }
	}
	
	@supports (background: lch(0% 45 282)) {
		--CONSTANTS: 45 282;
		--c0: lch(0% var(--CONSTANTS));
		--c1: lch(10% var(--CONSTANTS));
		--c2: lch(20% var(--CONSTANTS));
		--c3: lch(30% var(--CONSTANTS));
		--c4: lch(40% var(--CONSTANTS));
		--c5: lch(50% var(--CONSTANTS));
		--c6: lch(60% var(--CONSTANTS));
		--c7: lch(70% var(--CONSTANTS));
		--c8: lch(80% var(--CONSTANTS));
		--c9: lch(90% var(--CONSTANTS));
		--c10: lch(100% var(--CONSTANTS));
	}
	
	p {
		background: #ffffff;
		padding: 0.18rem 0.25rem 0.125rem;
		border-radius: 0.2rem;
		line-height: 1;
	}
}

.color-strip--chroma {
	--c0: rgb(46.63% 46.63% 46.64%);
	--c1: rgb(45.59% 46.35% 53.16%);
	--c2: rgb(44.1% 46.08% 59.69%);
	--c3: rgb(42.05% 45.84% 66.26%);
	--c4: rgb(39.3% 45.63% 72.88%);
	--c5: rgb(35.59% 45.44% 79.56%);
	--c6: rgb(30.45% 45.28% 86.3%);
	--c7: rgb(22.7% 45.16% 93.11%);
	--c8: rgb(4.71% 45.07% 99.99%);
	--c9: rgb(4.63% 45.07% 100%);
	--c10: rgb(4.63% 45.07% 100%);
	
	@supports (background: lch(0% 45 282)) {
		--L: 50%;
		--H: 282;
		--c0: lch(var(--L) 0 var(--H));
		--c1: lch(var(--L) 10 var(--H));
		--c2: lch(var(--L) 20 var(--H));
		--c3: lch(var(--L) 30 var(--H));
		--c4: lch(var(--L) 40 var(--H));
		--c5: lch(var(--L) 50 var(--H));
		--c6: lch(var(--L) 60 var(--H));
		--c7: lch(var(--L) 70 var(--H));
		--c8: lch(var(--L) 80 var(--H));
		--c9: lch(var(--L) 90 var(--H));
		--c10: lch(var(--L) 100 var(--H));
	}
}

.color-strip--hue {
	--c0: rgb(75.62% 30.45% 47.57%);
	--c1: rgb(73.61% 34.24% 28.07%);
	--c2: rgb(61.78% 42.39% 12.8%);
	--c3: rgb(43.42% 49.22% 10.47%);
	--c4: rgb(16.41% 53.24% 25.54%);
	--c5: rgb(0% 52.88% 46.13%);
	--c6: rgb(0% 51.79% 59.01%);
	--c7: rgb(0% 50.07% 73.51%);
	--c8: rgb(41.25% 44.14% 78.68%);
	--c9: rgb(65.22% 35.59% 66.7%);
	--c10: rgb(75.62% 30.45% 47.57%);
	
	@supports (background: lch(0% 45 282)) {
		--CONSTANTS: 50% 50;
		--c0: lch(var(--CONSTANTS) 0);
		--c1: lch(var(--CONSTANTS) 36);
		--c2: lch(var(--CONSTANTS) 72);
		--c3: lch(var(--CONSTANTS) 108);
		--c4: lch(var(--CONSTANTS) 144);
		--c5: lch(var(--CONSTANTS) 180);
		--c6: lch(var(--CONSTANTS) 216);
		--c7: lch(var(--CONSTANTS) 252);
		--c8: lch(var(--CONSTANTS) 288);
		--c9: lch(var(--CONSTANTS) 324);
		--c10: lch(var(--CONSTANTS) 360);
	}
}

.color-strip-wrapper--hsl {
	.color-strip--hue {
		> li {
			--hue: calc(var(--i) * (360 / 10));
			background: hsl(var(--hue, 0) 50% 45%);
		}
	}
	
	.color-strip--saturation {
		> li {
			--s: calc(var(--i, 0) * 10);
			background: hsl(282 calc(var(--s) * 1%) 45%);
		}
	}
	
	.color-strip--lightness-hsl {
		> li {
			--l: calc(var(--i, 0) * 10);
			background: hsl(282 50% calc(var(--l) * 1%));
		}
	}
}

View Compiled

const button = document.querySelector('[data-toggle]')
const buttonText = document.querySelector('[data-text]')

button.hidden = false

button.addEventListener('click', (e) => {
	if (e.target.checked) {
		document.body.classList.remove('is-grayscale')
		buttonText.innerText = ': Off'
		e.target.checked = false
	} else {
		document.body.classList.add('is-grayscale')
		buttonText.innerText = ': On'
		e.target.checked = true
	}
})

This Pen is owned by Smashing Magazine on CodePen. It is a fork of this Pen.

See more by @smashingmag on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.