LeaVerou

/**
 * 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%;

LeaVerou

/**
 * Extrapolation
 */

@keyframes funky {
	to {
		background: gray;
	}
}

LeaVerou

Lightness/darkness adjustments

How to lighten/darken

let color = new Color("hsl(20, 100%, 30%)");

// HSL lightness adjustment
let lighter = color.clone();

LeaVerou

/**
 * HSL problems
 */

body, div {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

div {

LeaVerou

/**
 * Providing color suggestions
 */

LeaVerou

/**
 * Selector lists in :not()
 */

body {
	background: red;
}

body:not(#a, .b, c) {
	background: green;

LeaVerou

/**
 * Complex selectors inside :not()
 */

body {
	background: red;
}

body:not(#foo .bar) {
	background: green;

LeaVerou

/**
 * orientation MQ
 */

@media (orientation: portrait) {
	body {
		background: green;
	}
}

LeaVerou

/**
 * var() and fallback
 */

--initial: initial;

background: var(--initial, green); /* fallback applied */

LeaVerou

/**
 * The first commented line is your dabblet’s title
 */

template {
	display: block;
	background: yellow;
	width: 100px; 
	height: 100px;
}