<html>
<head>
<title></title>
<style>
.swatch {
width: 100px;
height: 100px;
background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}
.h1p {
--hue: 310;
}
.h1 {
--hue: 340;
}
.h1s {
--hue: 335;
}
.h2d {
--hue: 50;
}
.h2 {
--hue: 37;
}
.h2s {
--hue: 30;
}
.h2h {
--hue: 57;
}
.h3 {
--hue: 130;
}
.h3s {
--hue: 145;
}
.h3h {
--hue: 203;
}
.h4 {
--hue: 224;
}
/* .h4hs {
--hue: 228;
}
.h4s {
--hue: 235;
} */
.h4hs {
--hue: 235;
}
.h4s {
--hue: 240;
}
.h5 {
--hue: 250;
}
.h6 {
--hue: 230;
}
.h7 {
--hue: 30;
}
.sp {
--saturation: 90%;
}
.s1 {
--saturation: 85%;
}
.s1x {
--saturation: 75%;
}
.sx {
--saturation: 65%;
}
.smx {
--saturation: 60%;
}
.sm {
--saturation: 55%;
}
.smm {
--saturation: 50%;
}
.s2 {
--saturation: 45%;
}
.ss {
--saturation: 40%;
}
.sl {
--saturation: 25%;
}
.s3 {
--saturation: 13%;
}
.l0 {
--lightness: 95%;
}
.l1 {
--lightness: 82%;
}
.l1h {
--lightness: 75%;
}
.l1hh {
--lightness: 70%;
}
.l2 {
--lightness: 67%;
}
.l2m {
--lightness: 62%;
}
.lm {
--lightness: 58%;
}
.l3 {
--lightness: 50%;
}
.l3h {
--lightness: 40%;
}
.l4 {
--lightness: 30%;
}
.l4h {
--lightness: 25%;
}
.l5 {
--lightness: 20%;
}
.l6 {
--lightness: 5%;
}
.row {
display: flex;
}
</style>
</head>
<body>
<div class="row">
<div class="swatch h6 s3 l0"></div>
<div class="swatch h6 s3 l2"></div>
<div class="swatch h6 s3 l4"></div>
<div class="swatch h6 s3 l6"></div>
</div>
<div class="row">
<div class="swatch h2 smx l3"></div>
<div class="swatch h7 ss l2"></div>
<div class="swatch h7 ss l3h"></div>
<div class="swatch h7 ss l4h"></div>
</div>
<div class="row">
<div class="swatch h5 smx l2"></div>
<div class="swatch h1p smx l2"></div>
<div class="swatch h1 smx l3"></div>
<div class="swatch h1s smx l4"></div>
</div>
<div class="row">
<div class="swatch h2h sp l2m"></div>
<div class="swatch h3 smx l3"></div>
<div class="swatch h3s smx l4"></div>
<div class="swatch h3s smx l5"></div>
</div>
<div class="row">
<div class="swatch h3h sp l2"></div>
<div class="swatch h4 smx l3"></div>
<div class="swatch h4hs smx l3h"></div>
<div class="swatch h4s smx l4"></div>
</div>
<!-- -->
<!-- <div class="row">
<div class="swatch h1 smx l3"></div>
<div class="swatch h1s smx l4"></div>
</div>
<div class="row">
<div class="swatch h2h sx lm"></div>
<div class="swatch h3 smx l3"></div>
<div class="swatch h3s smx l4"></div>
<div class="swatch h3s smx l5"></div>
</div>
<div class="row">
<div class="swatch h4 smx l3"></div>
<div class="swatch h4hs smx l3h"></div>
<div class="swatch h4s smx l4"></div>
</div>
<div class="row">
<div class="swatch h7 ss l4h"></div>
<div class="swatch h2s ss l3h"></div>
<div class="swatch h2s ss l2"></div>
</div>
<div class="row">
<div class="swatch h6 s3 l0"></div>
<div class="swatch h6 s3 l2"></div>
<div class="swatch h6 s3 l4"></div>
<div class="swatch h6 s3 l6"></div>
</div> -->
<!-- -->
<!-- <div class="row">
<div class="swatch h1 smx l2"></div>
<div class="swatch h1 smx l3"></div>
<div class="swatch h1s smx l4"></div>
<div class="swatch h1s smx l5"></div>
</div>
<div class="row">
<div class="swatch h2 smx l2"></div>
<div class="swatch h2 smx l3"></div>
<div class="swatch h2s smx l4"></div>
<div class="swatch h2s smx l5"></div>
</div>
<div class="row">
<div class="swatch h3 smx l2"></div>
<div class="swatch h3 smx l3"></div>
<div class="swatch h3s smx l4"></div>
<div class="swatch h3s smx l5"></div>
</div>
<div class="row">
<div class="swatch h4 smx l2"></div>
<div class="swatch h4 smx l3"></div>
<div class="swatch h4s smx l4"></div>
<div class="swatch h4s smx l5"></div>
</div>
<div class="row">
<div class="swatch h5 sl lm"></div>
<div class="swatch h5 sl l3h"></div>
<div class="swatch h5 sl l4h"></div>
</div>
<div class="row">
<div class="swatch h6 s3 l0"></div>
<div class="swatch h6 s3 l1"></div>
<div class="swatch h6 s3 l2"></div>
<div class="swatch h6 s3 l3"></div>
<div class="swatch h6 s3 l4"></div>
<div class="swatch h6 s3 l5"></div>
<div class="swatch h6 s3 l6"></div>
</div>
<div class="row">
<div class="swatch h7 ss l1"></div>
<div class="swatch h7 ss l2"></div>
<div class="swatch h7 ss l3"></div>
<div class="swatch h7 ss l4"></div>
<div class="swatch h7 ss l5"></div>
</div> -->
</body>
</html>