250 lines
4.8 KiB
HTML
250 lines
4.8 KiB
HTML
<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> |