diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index e37a154..8cda42a 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -135,13 +135,13 @@ export function MobileMenu() {
-
-
-
-
+
+
+
+
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index c9d7703..3746877 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -190,13 +190,13 @@ export function TopBar() {
-
-
-
-
+
+
+
+
diff --git a/src/utils/colorModes.ts b/src/utils/colorModes.ts
index 16c391f..ee8f0b5 100644
--- a/src/utils/colorModes.ts
+++ b/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 (phase < 0.33) {
- return [
- Math.round(255 * (1 - phase * 3)),
- 0,
- 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))];
+ if (t < 0.3) {
+ return [Math.round(t * 3.33 * 255), 0, Math.round(t * 1.67 * 255)];
+ } else if (t < 0.6) {
+ const p = (t - 0.3) / 0.3;
+ return [255, Math.round(p * 100), Math.round(50 * (1 - p))];
} else {
- const p = (phase - 0.67) * 3;
- return [Math.round(255 * p), Math.round(255 * (1 - p)), 255];
+ const p = (t - 0.6) / 0.4;
+ 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);
- const purple = Math.sin(t * Math.PI * 0.7 + Math.PI / 3);
- const blue = Math.sin(t * Math.PI * 0.5 + Math.PI / 2);
- return [
- Math.round(255 * (0.8 + 0.2 * pink)),
- Math.round(255 * (0.3 + 0.7 * purple)),
- Math.round(255 * (0.6 + 0.4 * blue)),
- ];
+ if (t < 0.25) {
+ return [0, Math.round(t * 2 * 255), Math.round(100 + t * 4 * 155)];
+ } else if (t < 0.5) {
+ const p = (t - 0.25) / 0.25;
+ return [0, Math.round(128 + p * 127), 255];
+ } else if (t < 0.75) {
+ 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':
- return [
- ((absValue * 255) / 256) | 0,
- ((((absValue * 2) % 256) * 255) / 256) | 0,
- ((((absValue * 3) % 256) * 255) / 256) | 0,
- ];
+ case 'forest':
+ return forestColor(absValue);
- case 'hsv':
- return hsvToRgb(absValue / 255.0, 1.0, 1.0);
+ case 'copper':
+ return copperColor(absValue);
case 'rainbow':
return rainbowColor(absValue);
@@ -187,11 +208,11 @@ export function calculateColorDirect(
case 'neon':
return neonColor(absValue);
- case 'cyberpunk':
- return cyberpunkColor(absValue);
+ case 'sunset':
+ return sunsetColor(absValue);
- case 'vaporwave':
- return vaporwaveColor(absValue);
+ case 'ocean':
+ return oceanColor(absValue);
case 'dithered':
return ditheredColor(absValue);