ok test

src/components/MobileMenu.tsx

@@ -135,13 +135,13 @@ export function MobileMenu() {
               <option value="red">Red Channel</option>
               <option value="green">Green Channel</option>
               <option value="blue">Blue Channel</option>
-              <option value="rgb">RGB Split</option>
-              <option value="hsv">HSV</option>
               <option value="rainbow">Rainbow</option>
               <option value="thermal">Thermal</option>
               <option value="neon">Neon</option>
-              <option value="cyberpunk">Cyberpunk</option>
+              <option value="sunset">Sunset</option>
-              <option value="vaporwave">Vaporwave</option>
+              <option value="ocean">Ocean</option>
+              <option value="forest">Forest</option>
+              <option value="copper">Copper</option>
               <option value="dithered">Dithered</option>
               <option value="palette">Palette</option>
             </select>

src/components/TopBar.tsx

@@ -190,13 +190,13 @@ export function TopBar() {
               <option value="red">Red Channel</option>
               <option value="green">Green Channel</option>
               <option value="blue">Blue Channel</option>
-              <option value="rgb">RGB Split</option>
-              <option value="hsv">HSV</option>
               <option value="rainbow">Rainbow</option>
               <option value="thermal">Thermal</option>
               <option value="neon">Neon</option>
-              <option value="cyberpunk">Cyberpunk</option>
+              <option value="sunset">Sunset</option>
-              <option value="vaporwave">Vaporwave</option>
+              <option value="ocean">Ocean</option>
+              <option value="forest">Forest</option>
+              <option value="copper">Copper</option>
               <option value="dithered">Dithered</option>
               <option value="palette">Palette</option>
             </select>

src/utils/colorModes.ts

@@ -93,34 +93,59 @@ export function neonColor(value: number): [number, number, number] {
   ];
 }
 
-export function cyberpunkColor(value: number): [number, number, number] {
+export function sunsetColor(value: number): [number, number, number] {
   const t = value / 255.0;
-  const phase = (t * 3) % 1;
+  if (t < 0.3) {
-  if (phase < 0.33) {
+    return [Math.round(t * 3.33 * 255), 0, Math.round(t * 1.67 * 255)];
-    return [
+  } else if (t < 0.6) {
-      Math.round(255 * (1 - phase * 3)),
+    const p = (t - 0.3) / 0.3;
-      0,
+    return [255, Math.round(p * 100), Math.round(50 * (1 - p))];
-      Math.round(255 * phase * 3),
-    ];
-  } else if (phase < 0.67) {
-    const p = (phase - 0.33) * 3;
-    return [0, Math.round(255 * p), Math.round(255 * (1 - p))];
   } else {
-    const p = (phase - 0.67) * 3;
+    const p = (t - 0.6) / 0.4;
-    return [Math.round(255 * p), Math.round(255 * (1 - p)), 255];
+    return [255, Math.round(100 + p * 155), Math.round(p * 100)];
   }
 }
 
-export function vaporwaveColor(value: number): [number, number, number] {
+export function oceanColor(value: number): [number, number, number] {
   const t = value / 255.0;
-  const pink = Math.sin(t * Math.PI);
+  if (t < 0.25) {
-  const purple = Math.sin(t * Math.PI * 0.7 + Math.PI / 3);
+    return [0, Math.round(t * 2 * 255), Math.round(100 + t * 4 * 155)];
-  const blue = Math.sin(t * Math.PI * 0.5 + Math.PI / 2);
+  } else if (t < 0.5) {
-  return [
+    const p = (t - 0.25) / 0.25;
-    Math.round(255 * (0.8 + 0.2 * pink)),
+    return [0, Math.round(128 + p * 127), 255];
-    Math.round(255 * (0.3 + 0.7 * purple)),
+  } else if (t < 0.75) {
-    Math.round(255 * (0.6 + 0.4 * blue)),
+    const p = (t - 0.5) / 0.25;
-  ];
+    return [Math.round(p * 100), 255, Math.round(255 - p * 100)];
+  } else {
+    const p = (t - 0.75) / 0.25;
+    return [Math.round(100 + p * 155), 255, Math.round(155 + p * 100)];
+  }
+}
+
+export function forestColor(value: number): [number, number, number] {
+  const t = value / 255.0;
+  if (t < 0.3) {
+    return [Math.round(t * 2 * 255), Math.round(50 + t * 3 * 205), 0];
+  } else if (t < 0.6) {
+    const p = (t - 0.3) / 0.3;
+    return [Math.round(150 - p * 100), 255, Math.round(p * 100)];
+  } else {
+    const p = (t - 0.6) / 0.4;
+    return [Math.round(50 + p * 100), Math.round(255 - p * 100), Math.round(100 + p * 55)];
+  }
+}
+
+export function copperColor(value: number): [number, number, number] {
+  const t = value / 255.0;
+  if (t < 0.4) {
+    return [Math.round(t * 2.5 * 255), Math.round(t * 1.5 * 255), Math.round(t * 0.5 * 255)];
+  } else if (t < 0.7) {
+    const p = (t - 0.4) / 0.3;
+    return [255, Math.round(153 + p * 102), Math.round(51 + p * 51)];
+  } else {
+    const p = (t - 0.7) / 0.3;
+    return [255, 255, Math.round(102 + p * 153)];
+  }
 }
 
 export function ditheredColor(value: number): [number, number, number] {
@@ -168,15 +193,11 @@ export function calculateColorDirect(
     case 'blue':
       return [0, 0, absValue];
 
-    case 'rgb':
+    case 'forest':
-      return [
+      return forestColor(absValue);
-        ((absValue * 255) / 256) | 0,
-        ((((absValue * 2) % 256) * 255) / 256) | 0,
-        ((((absValue * 3) % 256) * 255) / 256) | 0,
-      ];
 
-    case 'hsv':
+    case 'copper':
-      return hsvToRgb(absValue / 255.0, 1.0, 1.0);
+      return copperColor(absValue);
 
     case 'rainbow':
       return rainbowColor(absValue);
@@ -187,11 +208,11 @@ export function calculateColorDirect(
     case 'neon':
       return neonColor(absValue);
 
-    case 'cyberpunk':
+    case 'sunset':
-      return cyberpunkColor(absValue);
+      return sunsetColor(absValue);
 
-    case 'vaporwave':
+    case 'ocean':
-      return vaporwaveColor(absValue);
+      return oceanColor(absValue);
 
     case 'dithered':
       return ditheredColor(absValue);