refactor: hoist out color functions

Author: danielroe

app/utils/colors.ts

@@ -1,5 +1,21 @@
 // Vue Data UI does not support CSS vars nor OKLCH for now
 
+/** Converts a 0-255 RGB component to a 2-digit hex string */
+const componentToHex = (value: number): string =>
+  Math.round(Math.min(Math.max(0, value), 255))
+    .toString(16)
+    .padStart(2, '0')
+
+/** Converts a 0-1 linear value to a 2-digit hex string */
+const linearToHex = (value: number): string =>
+  Math.round(Math.min(Math.max(0, value), 1) * 255)
+    .toString(16)
+    .padStart(2, '0')
+
+/** Converts linear RGB to sRGB gamma-corrected value */
+const linearToSrgb = (value: number): number =>
+  value <= 0.0031308 ? 12.92 * value : 1.055 * Math.pow(value, 1 / 2.4) - 0.055
+
 /**
  * Converts a hex color to RGB components
  */
@@ -14,11 +30,7 @@ function hexToRgb(hex: string): [number, number, number] | null {
  * Converts RGB components to hex color
  */
 function rgbToHex(r: number, g: number, b: number): string {
-  const toHex = (value: number): string =>
-    Math.round(Math.min(Math.max(0, value), 255))
-      .toString(16)
-      .padStart(2, '0')
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
 }
 
 /**
@@ -62,21 +74,9 @@ export function oklchToHex(color: string | undefined | null): string | undefined
   m_ = m_ ** 3
   s_ = s_ ** 3
 
-  let r = 4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_
-  let g = -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_
-  let bRgb = -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
-
-  const toSrgb = (value: number): number =>
-    value <= 0.0031308 ? 12.92 * value : 1.055 * Math.pow(value, 1 / 2.4) - 0.055
-
-  r = toSrgb(r)
-  g = toSrgb(g)
-  bRgb = toSrgb(bRgb)
-
-  const toHex = (value: number): string =>
-    Math.round(Math.min(Math.max(0, value), 1) * 255)
-      .toString(16)
-      .padStart(2, '0')
+  const r = 4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_
+  const g = -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_
+  const bRgb = -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
 
-  return `#${toHex(r)}${toHex(g)}${toHex(bRgb)}`
+  return `#${linearToHex(linearToSrgb(r))}${linearToHex(linearToSrgb(g))}${linearToHex(linearToSrgb(bRgb))}`
 }