tags, folder rename, other stuff

frontend/src/utils/colors.js

@@ -33,6 +33,50 @@ const oklchToHex = (l, c, h) => {
   return `#${((sr << 16) | (sg << 8) | sb).toString(16).padStart(6, '0')}`;
 };
 
+const hslToHex = (h, s, l) => {
+  const normalizedH = ((h % 360) + 360) % 360;
+  const sat = clamp01(s);
+  const light = clamp01(l);
+
+  const chroma = (1 - Math.abs(2 * light - 1)) * sat;
+  const hPrime = normalizedH / 60;
+  const x = chroma * (1 - Math.abs((hPrime % 2) - 1));
+
+  let r1 = 0;
+  let g1 = 0;
+  let b1 = 0;
+
+  if (hPrime >= 0 && hPrime < 1) {
+    r1 = chroma;
+    g1 = x;
+  } else if (hPrime >= 1 && hPrime < 2) {
+    r1 = x;
+    g1 = chroma;
+  } else if (hPrime >= 2 && hPrime < 3) {
+    g1 = chroma;
+    b1 = x;
+  } else if (hPrime >= 3 && hPrime < 4) {
+    g1 = x;
+    b1 = chroma;
+  } else if (hPrime >= 4 && hPrime < 5) {
+    r1 = x;
+    b1 = chroma;
+  } else {
+    r1 = chroma;
+    b1 = x;
+  }
+
+  const m = light - chroma / 2;
+  const r = clamp01(r1 + m);
+  const g = clamp01(g1 + m);
+  const b = clamp01(b1 + m);
+
+  const sr = Math.round(r * 255);
+  const sg = Math.round(g * 255);
+  const sb = Math.round(b * 255);
+  return `#${((sr << 16) | (sg << 8) | sb).toString(16).padStart(6, '0')}`;
+};
+
 export const hexToRgb = (input) => {
   if (!input) return null;
   const match = HEX_COLOR_PATTERN.exec(input.trim());
@@ -76,19 +120,15 @@ export const getTagColorStyle = (hex) => {
 };
 
 export const generateRandomTagColor = () => {
-  const lightness = 0.72 + (Math.random() - 0.5) * 0.08;
-  let chroma = 0.8;
-  const hue = Math.random() * 360;
-
-  for (let attempt = 0; attempt < 5; attempt += 1) {
-    const hex = oklchToHex(lightness, chroma, hue);
-    if (hex) {
-      return hex;
-    }
-    chroma *= 0.82;
-  }
-
-  return '#8c8982';
+  const bucketCount = 8;
+  const bucketWidth = 360 / bucketCount;
+  const bucket = Math.floor(Math.random() * bucketCount);
+  const baseHue = bucket * bucketWidth;
+  const hueJitter = bucketWidth * 0.35;
+  const hue = baseHue + (Math.random() * 2 - 1) * hueJitter;
+  const saturation = 0.45 + Math.random() * 0.2; // 0.45 - 0.65
+  const lightness = 0.55 + Math.random() * 0.1; // 0.55 - 0.65
+  return hslToHex(hue, saturation, lightness);
 };
 
 export { HEX_COLOR_PATTERN };