more accurate gradients

emilwidlund · May 31, 2024 · 63d4183 · 63d4183
1 parent d14f9c1
commit 63d4183
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/apps/web/src/windows/GradientWindow.tsx b/apps/web/src/windows/GradientWindow.tsx
@@ -14,6 +14,23 @@ const defaultGradient: Zod.infer<ReturnType<typeof GradientSchema>> = {
     angle: 0
 };
 
+function hsv_to_hsl(h, s, v) {
+    // both hsv and hsl values are in [0, 1]
+    var l = ((2 - s) * v) / 2;
+
+    if (l != 0) {
+        if (l == 1) {
+            s = 0;
+        } else if (l < 0.5) {
+            s = (s * v) / (l * 2);
+        } else {
+            s = (s * v) / (2 - l * 2);
+        }
+    }
+
+    return [h, s, l];
+}
+
 export const GradientWindow = ({ node }: { node: Gradient }) => {
     const [color, setColor] =
         useState<Zod.infer<ReturnType<typeof GradientSchema>>>(defaultGradient);
@@ -33,13 +50,13 @@ export const GradientWindow = ({ node }: { node: Gradient }) => {
         `${color.angle}deg, `,
         `${color.colors
             .map(({ color }) => {
-                const [r, g, b] = hsv2rgb(
+                const [h, s, l] = hsv_to_hsl(
                     color.hue,
                     color.saturation,
                     color.value
                 );
 
-                return `rgb(${r}, ${g}, ${b})`;
+                return `hsl(${h} ${s * 100}% ${l * 100}%)`;
             })
             .join(', ')}`,
         ')'