initial ideas

2023-04-28 17:57:35 -07:00
parent 3e7bf2dd80
commit 3390e9d50a
11 changed files with 1362 additions and 0 deletions
--- a/colors.html
+++ b/colors.html
@@ -0,0 +1,158 @@
+<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>