On gists

Css Color: from var

CSS CSS trick

index.css Raw #

/*
https://jsbin.com/setohiqiwe/edit?html,css,output
*/

:root {
	--color: red;
}

.a, .b, .c {
	margin: 1rem;
	padding: 0.55rem;
}


.a {
	background: hsl(from var(--color) h s 90%);
}

.b {
	background: hsl(from var(--color) h s calc(l + 40));
}

.c {
	background: hsl(from var(--color) h s l / 0.2);
}




/*

Converted to HSL, red is hsl(0 100% 50%), thus:

Setting l to 90%,
Is just hsl(0 100% 90%).

Adding 40 to l,
Add the l components together:
hsl(0 100% (50% + 40%)) → hsl(0 100% 90%)

Changing opacity to 0.2,
This means mixing white (hsl(0 0% 100%)) with hsl(0 100% 50%) on top. I guess you can find some mathematical formula somewhere that resolves this to be hsl(0 100% 90%).

Do the same steps above for green hsl(120deg 100% 25%) and see you get different colors.

*/

index.html Raw #

	<h3>Red</h3>

	
	<div class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptatem, cupiditate temporibus iure ipsam expedita accusamus itaque pariatur dicta maxime cum illum quis dolorum voluptatibus fuga laboriosam voluptas, ipsa laudantium!</div>

	
	<div class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptatem, cupiditate temporibus iure ipsam expedita accusamus itaque pariatur dicta maxime cum illum quis dolorum voluptatibus fuga laboriosam voluptas, ipsa laudantium!</div>
	
	
		<div class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptatem, cupiditate temporibus iure ipsam expedita accusamus itaque pariatur dicta maxime cum illum quis dolorum voluptatibus fuga laboriosam voluptas, ipsa laudantium!</div>
	
	<hr>
	
	
		<div class="a" style="--color: green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptatem, cupiditate temporibus iure ipsam expedita accusamus itaque pariatur dicta maxime cum illum quis dolorum voluptatibus fuga laboriosam voluptas, ipsa laudantium!</div>

	
	<div class="b"  style="--color: green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptatem, cupiditate temporibus iure ipsam expedita accusamus itaque pariatur dicta maxime cum illum quis dolorum voluptatibus fuga laboriosam voluptas, ipsa laudantium!</div>
	
	
		<div class="c"  style="--color: green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptatem, cupiditate temporibus iure ipsam expedita accusamus itaque pariatur dicta maxime cum illum quis dolorum voluptatibus fuga laboriosam voluptas, ipsa laudantium!</div>