feat(@typegpu/color): hexToRgb, hexToRgba and hexToOklab utilities (#2284)

Author: iwoplaza

packages/typegpu-color/src/hex.ts

@@ -0,0 +1,61 @@
+import tgpu, { d } from 'typegpu';
+import { rgbToOklab } from './oklab.ts';
+
+export const hexToRgb = tgpu.comptime((hex: string | number): d.v3f => {
+  let h: number;
+  if (typeof hex === 'string') {
+    let normalized = hex.trim();
+    if (normalized.startsWith('#')) {
+      normalized = normalized.slice(1);
+    }
+    // Allow 6-digit (RRGGBB) or 8-digit (RRGGBBAA) hex strings.
+    if (normalized.length !== 6 && normalized.length !== 8) {
+      throw new Error(`hexToRgb expected a 6- or 8-digit hex string, got "${hex}".`);
+    }
+    // For 8-digit input, drop the alpha channel and keep RRGGBB.
+    if (normalized.length === 8) {
+      normalized = normalized.slice(0, 6);
+    }
+    h = Number.parseInt(normalized, 16);
+    if (Number.isNaN(h)) {
+      throw new Error(`hexToRgb could not parse hex string "${hex}".`);
+    }
+  } else {
+    h = hex;
+    if (!Number.isFinite(h)) {
+      throw new Error(`hexToRgb expected a finite numeric value, got ${hex}.`);
+    }
+  }
+  return d.vec3f((h >> 16) & 0xff, (h >> 8) & 0xff, h & 0xff).div(255);
+});
+
+export const hexToRgba = tgpu.comptime((hex: string | number): d.v4f => {
+  let h: number;
+  if (typeof hex === 'string') {
+    let normalized = hex.trim();
+    if (normalized.startsWith('#')) {
+      normalized = normalized.slice(1);
+    }
+    // Allow 6-digit (RRGGBB) or 8-digit (RRGGBBAA) hex strings.
+    // For 6-digit input, assume an implicit fully opaque alpha (FF).
+    if (normalized.length === 6) {
+      normalized = normalized + 'ff';
+    } else if (normalized.length !== 8) {
+      throw new Error(`hexToRgba expected a 6- or 8-digit hex string, got "${hex}".`);
+    }
+    h = Number.parseInt(normalized, 16);
+    if (Number.isNaN(h)) {
+      throw new Error(`hexToRgba could not parse hex string "${hex}".`);
+    }
+  } else {
+    h = hex;
+    if (!Number.isFinite(h)) {
+      throw new Error(`hexToRgba expected a finite numeric value, got ${hex}.`);
+    }
+  }
+  return d.vec4f((h >> 24) & 0xff, (h >> 16) & 0xff, (h >> 8) & 0xff, h & 0xff).div(255);
+});
+
+export const hexToOklab = tgpu.comptime((hex: string | number): d.v3f => {
+  return rgbToOklab(hexToRgb(hex));
+});

packages/typegpu-color/src/index.ts

@@ -10,3 +10,4 @@ export {
   oklabToRgb,
   rgbToOklab,
 } from './oklab.ts';
+export { hexToRgb, hexToRgba, hexToOklab } from './hex.ts';

packages/typegpu-color/src/srgb.ts

@@ -1,14 +1,15 @@
 import tgpu from 'typegpu';
 import { vec3f } from 'typegpu/data';
-import { add, gt, mul, pow, select, sub } from 'typegpu/std';
+import { gt, pow, select } from 'typegpu/std';
 
 export const linearToSrgb = tgpu.fn(
   [vec3f],
   vec3f,
 )((linear) => {
+  'use gpu';
   return select(
-    mul(12.92, linear),
-    sub(mul(1.055, pow(linear, vec3f(1.0 / 2.4))), vec3f(0.055)),
+    12.92 * linear,
+    1.055 * pow(linear, vec3f(1.0 / 2.4)) - vec3f(0.055),
     gt(linear, vec3f(0.0031308)),
   );
 });
@@ -17,9 +18,10 @@ export const srgbToLinear = tgpu.fn(
   [vec3f],
   vec3f,
 )((rgb) => {
+  'use gpu';
   return select(
-    mul(1.0 / 12.92, rgb),
-    pow(mul(add(rgb, vec3f(0.055)), vec3f(1 / (1 + 0.055))), vec3f(2.4)),
+    rgb / 12.92,
+    pow((rgb + vec3f(0.055)) / (1 + 0.055), vec3f(2.4)),
     gt(rgb, vec3f(0.04045)),
   );
 });