diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts
index ff1b9b524..2b767a9dd 100644
--- a/src/LGraphCanvas.ts
+++ b/src/LGraphCanvas.ts
@@ -4788,8 +4788,8 @@ export class LGraphCanvas {
   drawNode(node: LGraphNode, ctx: CanvasRenderingContext2D): void {
     this.current_node = node
 
-    const color = node.color || node.constructor.color || LiteGraph.NODE_DEFAULT_COLOR
-    const bgcolor = node.bgcolor || node.constructor.bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR
+    const color = node.renderingColor
+    const bgcolor = node.renderingBgColor
 
     const low_quality = this.low_quality
     const editor_alpha = this.editor_alpha
@@ -5264,18 +5264,6 @@ export class LGraphCanvas {
         ctx.shadowColor = "transparent"
       }
 
-      let colState = LiteGraph.node_box_coloured_by_mode && LiteGraph.NODE_MODES_COLORS[node.mode]
-        ? LiteGraph.NODE_MODES_COLORS[node.mode]
-        : false
-
-      if (LiteGraph.node_box_coloured_when_on) {
-        colState = node.action_triggered
-          ? "#FFF"
-          : node.execute_triggered
-            ? "#AAA"
-            : colState
-      }
-
       // title box
       const box_size = 10
       if (node.onDrawTitleBox) {
@@ -5298,7 +5286,7 @@ export class LGraphCanvas {
           ctx.fill()
         }
 
-        ctx.fillStyle = node.boxcolor || colState || LiteGraph.NODE_DEFAULT_BOXCOLOR
+        ctx.fillStyle = node.renderingBoxColor
         if (low_quality)
           ctx.fillRect(
             title_height * 0.5 - box_size * 0.5,
@@ -5327,7 +5315,7 @@ export class LGraphCanvas {
             box_size + 2,
           )
         }
-        ctx.fillStyle = node.boxcolor || colState || LiteGraph.NODE_DEFAULT_BOXCOLOR
+        ctx.fillStyle = node.renderingBoxColor
         ctx.fillRect(
           (title_height - box_size) * 0.5,
           (title_height + box_size) * -0.5,
diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts
index 78e61c359..a510dda6b 100644
--- a/src/LGraphNode.ts
+++ b/src/LGraphNode.ts
@@ -169,9 +169,49 @@ export class LGraphNode implements Positionable, IPinnable {
   mode: LGraphEventMode
   last_serialization?: ISerialisedNode
   serialize_widgets?: boolean
-  color: string
-  bgcolor: string
-  boxcolor: string
+  /**
+   * The overridden fg color used to render the node.
+   * @see {@link renderingColor}
+   */
+  color?: string
+  /**
+   * The overridden bg color used to render the node.
+   * @see {@link renderingBgColor}
+   */
+  bgcolor?: string
+  /**
+   * The overridden box color used to render the node.
+   * @see {@link renderingBoxColor}
+   */
+  boxcolor?: string
+
+  /** The fg color used to render the node. */
+  get renderingColor(): string {
+    return this.color || this.constructor.color || LiteGraph.NODE_DEFAULT_COLOR
+  }
+
+  /** The bg color used to render the node. */
+  get renderingBgColor(): string {
+    return this.bgcolor || this.constructor.bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR
+  }
+
+  /** The box color used to render the node. */
+  get renderingBoxColor(): string {
+    let colState = LiteGraph.node_box_coloured_by_mode && LiteGraph.NODE_MODES_COLORS[this.mode]
+      ? LiteGraph.NODE_MODES_COLORS[this.mode]
+      : undefined
+
+    if (LiteGraph.node_box_coloured_when_on) {
+      colState = this.action_triggered
+        ? "#FFF"
+        : this.execute_triggered
+          ? "#AAA"
+          : colState
+    }
+
+    return this.boxcolor || colState || LiteGraph.NODE_DEFAULT_BOXCOLOR
+  }
+
   exec_version: number
   action_call?: string
   execute_triggered: number