diff --git a/src/extensions/scratch3_pen/index.js b/src/extensions/scratch3_pen/index.js
index b3a8818d3..e4a0ea843 100644
--- a/src/extensions/scratch3_pen/index.js
+++ b/src/extensions/scratch3_pen/index.js
@@ -673,6 +673,8 @@ class Scratch3PenBlocks {
         const hueValue = Cast.toNumber(args.HUE);
         const colorValue = hueValue / 2;
         this._setOrChangeColorParam(ColorParam.COLOR, colorValue, penState, false);
+
+        this._legacyUpdatePenColor(penState);
     }
 
     /**
@@ -686,6 +688,8 @@ class Scratch3PenBlocks {
         const hueChange = Cast.toNumber(args.HUE);
         const colorChange = hueChange / 2;
         this._setOrChangeColorParam(ColorParam.COLOR, colorChange, penState, true);
+
+        this._legacyUpdatePenColor(penState);
     }
 
     /**
@@ -705,25 +709,10 @@ class Scratch3PenBlocks {
         newShade = newShade % 200;
         if (newShade < 0) newShade += 200;
 
-        // Create the new color in RGB using the scratch 2 "shade" model
-        let rgb = Color.hsvToRgb({h: penState.color * 360 / 100, s: 1, v: 1});
-        const shade = (newShade > 100) ? 200 - newShade : newShade;
-        if (shade < 50) {
-            rgb = Color.mixRgb(Color.RGB_BLACK, rgb, (10 + shade) / 60);
-        } else {
-            rgb = Color.mixRgb(rgb, Color.RGB_WHITE, (shade - 50) / 60);
-        }
-
-        // Update the pen state according to new color
-        const hsv = Color.rgbToHsv(rgb);
-        penState.color = 100 * hsv.h / 360;
-        penState.saturation = 100 * hsv.s;
-        penState.brightness = 100 * hsv.v;
-
         // And store the shade that was used to compute this new color for later use.
         penState._shade = newShade;
 
-        this._updatePenColor(penState);
+        this._legacyUpdatePenColor(penState);
     }
 
     /**
@@ -739,6 +728,29 @@ class Scratch3PenBlocks {
         this.setPenShadeToNumber({SHADE: penState._shade + shadeChange}, util);
     }
 
+    /**
+     * Update the pen state's color from its hue & shade values, Scratch 2.0 style.
+     * @param {object} penState - update the HSV & RGB values in this pen state from its hue & shade values.
+     * @private
+     */
+    _legacyUpdatePenColor (penState) {
+        // Create the new color in RGB using the scratch 2 "shade" model
+        let rgb = Color.hsvToRgb({h: penState.color * 360 / 100, s: 1, v: 1});
+        const shade = (penState._shade > 100) ? 200 - penState._shade : penState._shade;
+        if (shade < 50) {
+            rgb = Color.mixRgb(Color.RGB_BLACK, rgb, (10 + shade) / 60);
+        } else {
+            rgb = Color.mixRgb(rgb, Color.RGB_WHITE, (shade - 50) / 60);
+        }
+
+        // Update the pen state according to new color
+        const hsv = Color.rgbToHsv(rgb);
+        penState.color = 100 * hsv.h / 360;
+        penState.saturation = 100 * hsv.s;
+        penState.brightness = 100 * hsv.v;
+
+        this._updatePenColor(penState);
+    }
 }
 
 module.exports = Scratch3PenBlocks;