hsl

css/classic.css

@@ -1,9 +1,11 @@
 .mino {
+  --color: hsl(var(--hue), var(--saturation), 40%);
+  --light: hsl(var(--hue), calc(0.66 * var(--saturation)), 84%);
   background-color: var(--color);
   background-image:
     radial-gradient(
-      ellipse 20% 8% at 25% 20%,
+      ellipse 22% 8% at 25% 22%,
-      #ffffff55,
+      #ffffff66,
       #ffffff33 40%,
       transparent 70%
     ),
@@ -29,41 +31,42 @@
 }
 
 .I {
-  --color: #009fcf;
+  --hue: 193;
-  --light: #cfeaf1;
+  --saturation: 100%;
 }
 
 .J {
-  --color: #0048a8;
+  --hue: 215;
-  --light: #adcdff;
+  --saturation: 100%;
 }
 
 .L {
-  --color: #f96700;
+  --hue: 25;
-  --light: #f8d3b8;
+  --saturation: 100%;
 }
 
 .O {
-  --color: #fdba00;
+  --hue: 42;
-  --light: #f6e0b8;
+  --saturation: 100%;
 }
 
 .S {
-  --color: #59b616;
+  --hue: 95;
-  --light: #dceecf;
+  --saturation: 100%;
 }
 
 .T {
-  --color: #852687;
+  --hue: 300;
-  --light: #e3c7e3;
+  --saturation: 56%;
 }
 
 .Z {
-  --color: #a90f16;
+  --hue: 357;
-  --light: #ebc6c8;
+  --saturation: 84%;
 }
 
 .ghost {
+  --color: hsl(var(--hue), calc(0.50 * var(--saturation)), 32%);
+  --light: hsl(var(--hue), calc(0.33 * var(--saturation)), 64%);
   opacity: 35%;
-  filter: saturate(50%) brightness(80%);
 }