158 lines
2.0 KiB
HTML
158 lines
2.0 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
#palette {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="palette"></div>
|
||
|
|
<script src="colors.js"></script>
|
||
|
|
<script>
|
||
|
|
const div = document.getElementById("palette");
|
||
|
|
div.innerHTML = palette.map(c => `<div class="swatch" style="background-color: hsl(${c[0]}, ${c[1]}%, ${c[2]}%);"></div>`).join("");
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|