diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js
index 340887294d..a4a2b33af5 100644
--- a/src/color/creating_reading.js
+++ b/src/color/creating_reading.js
@@ -341,6 +341,30 @@ function creatingReading(p5, fn){
    *
    *   describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
    * }
+   *
+   * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       // Same syntax as regular sketch code...
+   *       let c = color(255, 0, 0);
+   *       // ...but c is a vec4 with normalized RGBA (0-1), not a p5.Color.
+   *       inputs.color = c;
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A red sphere on a gray background.');
+   * }
    */
   /**
    * @method color
@@ -396,12 +420,38 @@ function creatingReading(p5, fn){
    * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
    * returns the red value in the given range.
    *
+   * In p5.strands shader callbacks, `red()` operates on `vec4` values and
+   * returns the red channel as a normalized value in the 0–1 range.
+   * `colorMode()` has no effect inside shader callbacks.
+   *
    * @method red
    * @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
    *                                         color components, or CSS color string.
    * @return {Number} the red value.
    *
    * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       let r = red(inputs.color);
+   *       inputs.color = [r, 0, 0, 1];
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A sphere colored using only its red channel.');
+   * }
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -517,12 +567,38 @@ function creatingReading(p5, fn){
    * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
    * returns the green value in the given range.
    *
+   * In p5.strands shader callbacks, `green()` operates on `vec4` values and
+   * returns the green channel as a normalized value in the 0–1 range.
+   * `colorMode()` has no effect inside shader callbacks.
+   *
    * @method green
    * @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
    *                                         color components, or CSS color string.
    * @return {Number} the green value.
    *
    * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       let g = green(inputs.color);
+   *       inputs.color = [0, g, 0, 1];
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A sphere colored using only its green channel.');
+   * }
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -638,12 +714,38 @@ function creatingReading(p5, fn){
    * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
    * returns the blue value in the given range.
    *
+   * In p5.strands shader callbacks, `blue()` operates on `vec4` values and
+   * returns the blue channel as a normalized value in the 0–1 range.
+   * `colorMode()` has no effect inside shader callbacks.
+   *
    * @method blue
    * @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
    *                                         color components, or CSS color string.
    * @return {Number} the blue value.
    *
    * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       let b = blue(inputs.color);
+   *       inputs.color = [0, 0, b, 1];
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A sphere colored using only its blue channel.');
+   * }
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -755,12 +857,38 @@ function creatingReading(p5, fn){
    * <a href="#/p5.Color">p5.Color</a> object, an array of color components, or
    * a CSS color string.
    *
+   * In p5.strands shader callbacks, `alpha()` operates on `vec4` values and
+   * returns the alpha channel as a normalized value in the 0–1 range.
+   * `colorMode()` has no effect inside shader callbacks.
+   *
    * @method alpha
    * @param {p5.Color|Number[]|String} color <a href="#/p5.Color">p5.Color</a> object, array of
    *                                         color components, or CSS color string.
    * @return {Number} the alpha value.
    *
    * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       let a = alpha(inputs.color);
+   *       inputs.color = [inputs.color.rgb, a * 0.5];
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A semi-transparent sphere.');
+   * }
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -850,12 +978,38 @@ function creatingReading(p5, fn){
    * <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it returns the hue
    * value in the given mode.
    *
+   * In p5.strands shader callbacks, `hue()` operates on `vec4` values and
+   * returns the hue as a normalized value in the 0–1 range.
+   * `colorMode()` has no effect inside shader callbacks.
+   *
    * @method hue
    * @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
    *                                         color components, or CSS color string.
    * @return {Number} the hue value.
    *
    * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       let h = hue(inputs.color);
+   *       inputs.color = [h, h, h, 1];
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A sphere shaded in grayscale based on hue.');
+   * }
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -976,12 +1130,38 @@ function creatingReading(p5, fn){
    * <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it returns the
    * saturation value in the given mode.
    *
+   * In p5.strands shader callbacks, `saturation()` operates on `vec4` values
+   * and returns the saturation as a normalized value in the 0–1 range.
+   * `colorMode()` has no effect inside shader callbacks.
+   *
    * @method saturation
    * @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
    *                                         color components, or CSS color string.
    * @return {Number} the saturation value
    *
    * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       let s = saturation(inputs.color);
+   *       inputs.color = [s, s, s, 1];
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A sphere shaded in grayscale based on saturation.');
+   * }
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1134,12 +1314,38 @@ function creatingReading(p5, fn){
    * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB, it
    * returns the brightness value in the given range.
    *
+   * In p5.strands shader callbacks, `brightness()` operates on `vec4` values
+   * and returns the brightness as a normalized value in the 0–1 range.
+   * `colorMode()` has no effect inside shader callbacks.
+   *
    * @method brightness
    * @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
    *                                         color components, or CSS color string.
    * @return {Number} the brightness value.
    *
    * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       let b = brightness(inputs.color);
+   *       inputs.color = [b, b, b, 1];
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A sphere shaded in grayscale based on brightness.');
+   * }
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1264,12 +1470,38 @@ function creatingReading(p5, fn){
    * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSL, it
    * returns the lightness value in the given range.
    *
+   * In p5.strands shader callbacks, `lightness()` operates on `vec4` values
+   * and returns the lightness as a normalized value in the 0–1 range.
+   * `colorMode()` has no effect inside shader callbacks.
+   *
    * @method lightness
    * @param {p5.Color|Number[]|String} color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
    *                                         color components, or CSS color string.
    * @return {Number} the lightness value.
    *
    * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       let l = lightness(inputs.color);
+   *       inputs.color = [l, l, l, 1];
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A sphere shaded in grayscale based on lightness.');
+   * }
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1396,6 +1628,10 @@ function creatingReading(p5, fn){
    * The way that colors are interpolated depends on the current
    * <a href="#/p5/colorMode">colorMode()</a>.
    *
+   * In p5.strands shader callbacks, `lerpColor()` interpolates between
+   * `vec4` colors and returns a normalized `vec4` with RGBA components in
+   * the 0–1 range. `colorMode()` has no effect inside shader callbacks.
+   *
    * @method lerpColor
    * @param  {p5.Color} c1  interpolate from this color.
    * @param  {p5.Color} c2  interpolate to this color.
@@ -1403,6 +1639,30 @@ function creatingReading(p5, fn){
    * @return {p5.Color}     interpolated color.
    *
    * @example
+   * let myShader;
+   * function setup() {
+   *   createCanvas(100, 100, WEBGL);
+   *
+   *   myShader = baseMaterialShader().modify(() => {
+   *     getPixelInputs((inputs) => {
+   *       let c1 = color('red');
+   *       let c2 = color('blue');
+   *       let mixed = lerpColor(c1, c2, 0.5);
+   *       inputs.color = mixed;
+   *       return inputs;
+   *     });
+   *   });
+   * }
+   *
+   * function draw() {
+   *   shader(myShader);
+   *   noStroke();
+   *   sphere(40);
+   *
+   *   describe('A purple sphere, a blend of red and blue.');
+   * }
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *