Pastel Update

Author: Lavanic

src/pages/index.astro

@@ -41,7 +41,7 @@
       }
 
       .bg-frame-1 {
-        background: linear-gradient(to bottom, #82AD99 0%, #508C72 45%, #508C72 100%);
+        background: linear-gradient(to bottom, #A5E6A5 0%, #77DD77 45%, #77DD77 100%);
         aspect-ratio: 1920 / 1080;
         position: relative;
       }
@@ -54,7 +54,7 @@
         transform: translateX(-50%);
         width: 69%;
         height: 100%;
-        background: linear-gradient(180deg, #82AD99 0%, #508C72 57%);
+        background: linear-gradient(180deg, #A5E6A5 0%, #77DD77 57%);
       }
 
       .bg-frame-1::after {
@@ -65,7 +65,7 @@
       }
 
       .bg-frame-2 {
-        background-color: #508C72;
+        background-color: #77DD77;
         background-image: url("/frame2.svg");
         background-size: 100% auto;
         background-repeat: repeat-y;
@@ -132,7 +132,7 @@
         height: 24px;
         border-radius: 6px;
         border: 2px solid rgba(255, 255, 255, 0.3);
-        background: hsl(154, 35%, 65%);
+        background: #77DD77;
         flex-shrink: 0;
       }
 
@@ -144,13 +144,13 @@
         border-radius: 4px;
         outline: none;
         background: linear-gradient(to right,
-          hsl(0, 35%, 65%),
-          hsl(60, 35%, 65%),
-          hsl(120, 35%, 65%),
-          hsl(180, 35%, 65%),
-          hsl(240, 35%, 65%),
-          hsl(300, 35%, 65%),
-          hsl(360, 35%, 65%)
+          hsl(0, 56%, 67%),
+          hsl(60, 56%, 67%),
+          hsl(120, 56%, 67%),
+          hsl(180, 56%, 67%),
+          hsl(240, 56%, 67%),
+          hsl(300, 56%, 67%),
+          hsl(360, 56%, 67%)
         );
       }
 
@@ -237,22 +237,17 @@
       const degrees = document.getElementById("hue-degrees") as HTMLElement;
       const swatch = document.getElementById("color-swatch") as HTMLElement;
 
-      // Base hue of #508C72 is ~154°
-      const BASE_HUE = 154;
-
-      // Apply pastel filter on load
-      container.style.filter = "saturate(0.8) brightness(1.15)";
+      // Base hue of #77DD77 is 120°
+      const BASE_HUE = 120;
 
       range.addEventListener("input", () => {
         const val = parseInt(range.value);
-        container.style.filter = val === 0
-          ? "saturate(0.8) brightness(1.15)"
-          : `hue-rotate(${val}deg) saturate(0.8) brightness(1.15)`;
+        container.style.filter = val === 0 ? "" : `hue-rotate(${val}deg)`;
         degrees.textContent = `${val}°`;
 
         // Update swatch to show the shifted base color
         const newHue = (BASE_HUE + val) % 360;
-        swatch.style.background = `hsl(${newHue}, 35%, 65%)`;
+        swatch.style.background = `hsl(${newHue}, 56%, 67%)`;
       });
 
       toggle.addEventListener("click", () => {