initial ideas
This commit is contained in:
dylan
250
index.html
Normal file
250
index.html
Normal file
@@ -0,0 +1,250 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user