diff --git a/webgpu/webgl-optimization-none-uniform-buffers-4kplus.html b/webgpu/webgl-optimization-none-uniform-buffers-4kplus.html
index a7903e28..414d9940 100644
--- a/webgpu/webgl-optimization-none-uniform-buffers-4kplus.html
+++ b/webgpu/webgl-optimization-none-uniform-buffers-4kplus.html
@@ -283,10 +283,10 @@
     format: gl.RGBA,
     width: 2,
     src: new Uint8Array([
-      255, 255, 255, 255,
-      128, 128, 128, 255,
-      192, 192, 192, 255,
-      64, 64, 64, 255,
+      ...hslToRGBA8(0, 0, 1),
+      ...hslToRGBA8(0, 0, 0.5),
+      ...hslToRGBA8(0, 0, 0.75),
+      ...hslToRGBA8(0, 0, 0.25),
     ]),
     minMag: gl.NEAREST,
     wrap: gl.CLAMP_TO_EDGE,
diff --git a/webgpu/webgl-optimization-none-uniform-buffers-8k.html b/webgpu/webgl-optimization-none-uniform-buffers-8k.html
index 0649eaa7..99102396 100644
--- a/webgpu/webgl-optimization-none-uniform-buffers-8k.html
+++ b/webgpu/webgl-optimization-none-uniform-buffers-8k.html
@@ -283,10 +283,10 @@
     format: gl.RGBA,
     width: 2,
     src: new Uint8Array([
-      255, 255, 255, 255,
-      128, 128, 128, 255,
-      192, 192, 192, 255,
-      64, 64, 64, 255,
+      ...hslToRGBA8(0, 0, 1),
+      ...hslToRGBA8(0, 0, 0.5),
+      ...hslToRGBA8(0, 0, 0.75),
+      ...hslToRGBA8(0, 0, 0.25),
     ]),
     minMag: gl.NEAREST,
     wrap: gl.CLAMP_TO_EDGE,
diff --git a/webgpu/webgl-optimization-none-uniform-buffers.html b/webgpu/webgl-optimization-none-uniform-buffers.html
index 981efba1..928ce78b 100644
--- a/webgpu/webgl-optimization-none-uniform-buffers.html
+++ b/webgpu/webgl-optimization-none-uniform-buffers.html
@@ -282,10 +282,10 @@
     format: gl.RGBA,
     width: 2,
     src: new Uint8Array([
-      255, 255, 255, 255,
-      128, 128, 128, 255,
-      192, 192, 192, 255,
-      64, 64, 64, 255,
+      ...hslToRGBA8(0, 0, 1),
+      ...hslToRGBA8(0, 0, 0.5),
+      ...hslToRGBA8(0, 0, 0.75),
+      ...hslToRGBA8(0, 0, 0.25),
     ]),
     minMag: gl.NEAREST,
     wrap: gl.CLAMP_TO_EDGE,
diff --git a/webgpu/webgl-optimization-none.html b/webgpu/webgl-optimization-none.html
index 8638020a..f78a5d11 100644
--- a/webgpu/webgl-optimization-none.html
+++ b/webgpu/webgl-optimization-none.html
@@ -277,10 +277,10 @@
     format: gl.RGBA,
     width: 2,
     src: new Uint8Array([
-      255, 255, 255, 255,
-      128, 128, 128, 255,
-      192, 192, 192, 255,
-      64, 64, 64, 255,
+      ...hslToRGBA8(0, 0, 1),
+      ...hslToRGBA8(0, 0, 0.5),
+      ...hslToRGBA8(0, 0, 0.75),
+      ...hslToRGBA8(0, 0, 0.25),
     ]),
     minMag: gl.NEAREST,
     wrap: gl.CLAMP_TO_EDGE,
diff --git a/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set-count-100.html b/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set-count-100.html
index cd6d367d..a09a6721 100644
--- a/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set-count-100.html
+++ b/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set-count-100.html
@@ -55,6 +55,7 @@
 const gpuAverage = new RollingAverage();
 const mathAverage = new RollingAverage();
 
+/** Given a css color string, return an array of 4 values from 0 to 255 */
 const cssColorToRGBA8 = (() => {
   const canvas = new OffscreenCanvas(1, 1);
   const ctx = canvas.getContext('2d', {willReadFrequently: true});
@@ -66,13 +67,31 @@
   };
 })();
 
-const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;
+/** Given a css color string, return an array of 4 values from 0 to 1 */
 const cssColorToRGBA = cssColor => cssColorToRGBA8(cssColor).map(v => v / 255);
-const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
 
-// Returns a random number between min and max.
-// If min and max are not specified, returns 0 to 1
-// If max is not specified, return 0 to min.
+/**
+ * Given hue, saturation, and luminance values in the range of 0 to 1
+ * return the corresponding CSS hsl string
+ */
+const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;
+
+/**
+ * Given hue, saturation, and luminance values in the range of 0 to 1
+ * returns an array of values from 0 to 1
+ */
+const hslToRGBA = (h, s, l) => cssColorToRGBA(hsl(h, s, l));
+/**
+ * Given hue, saturation, and luminance values in the range of 0 to 1
+ * returns an array of values from 0 to 255
+ */
+const hslToRGBA8 = (h, s, l) => cssColorToRGBA8(hsl(h, s, l));
+
+/**
+ * Returns a random number between min and max.
+ * If min and max are not specified, returns 0 to 1
+ * If max is not specified, return 0 to min.
+ */
 function rand(min, max) {
   if (min === undefined) {
     max = 1;
@@ -84,12 +103,12 @@
   return Math.random() * (max - min) + min;
 }
 
+/** Selects a random array element */
+const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
+
 /** Rounds up v to a multiple of alignment */
 const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
 
-// Selects a random array element
-const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
-
 async function main() {
   const adapter = await navigator.gpu?.requestAdapter();
   const canTimestamp = adapter.features.has('timestamp-query');