Merge pull request #27209 from overleaf/dp-collaborator-colour

Adapt online user and chat user colors based on luminance

GitOrigin-RevId: 1b0c843147ee3dc585866bc491a7c7613cb00e70

services/web/frontend/js/shared/utils/colors.ts

@@ -34,6 +34,51 @@ export function getBackgroundColorForUserId(userId?: string) {
   return `hsl(${getHueForUserId(userId)}, 70%, 50%)`
 }
 
+export function hslStringToLuminance(hslString: string): number {
+  // First extract the individual components from the HSL string
+  const hslSplit = hslString.slice(4).split(')')[0].split(',')
+
+  const h = Number(hslSplit[0])
+  const s = Number(hslSplit[1].slice(0, -1)) / 100
+  const l = Number(hslSplit[2].slice(0, -1)) / 100
+
+  // Then we need to convert HSL to RGB
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = l - c / 2
+  let r = 0
+  let g = 0
+  let b = 0
+  if (h >= 0 && h < 60) {
+    r = c + m
+    g = x + m
+    b = m
+  } else if (h >= 60 && h < 120) {
+    r = x + m
+    g = c + m
+    b = m
+  } else if (h >= 120 && h < 180) {
+    r = m
+    g = c + m
+    b = x + m
+  } else if (h >= 180 && h < 240) {
+    r = m
+    g = x + m
+    b = c + m
+  } else if (h >= 240 && h < 300) {
+    r = x + m
+    g = m
+    b = c + m
+  } else if (h >= 300 && h < 360) {
+    r = c + m
+    g = m
+    b = x + m
+  }
+
+  // Finally we calculate the luminance
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
 const cachedHues = new Map()
 
 export function getHueForId(id: string) {