diff --git a/src/renderer/colors.scss b/src/renderer/colors.scss
index 06cedc182..e507964f0 100644
--- a/src/renderer/colors.scss
+++ b/src/renderer/colors.scss
@@ -31,6 +31,7 @@
     --type-color-number: #3182ce;
     --type-color-string: #10b52c;
     --type-color-bool: #319795;
+    --type-color-color: #fff;
     --type-color-torch: #dd6b20;
     --type-color-onnx: #63b3ed;
     --type-color-ncnn: #ed64a6;
@@ -162,6 +163,8 @@
     /* controls */
     --controls-bg: var(--theme-300-a75);
     --controls-bg-hover: var(--theme-400);
+
+    --type-color-color: #000;
 }
 
 // Default theme (copied from Chakra UI)
diff --git a/src/renderer/helpers/accentColors.ts b/src/renderer/helpers/accentColors.ts
index 4811bc529..393bbdea3 100644
--- a/src/renderer/helpers/accentColors.ts
+++ b/src/renderer/helpers/accentColors.ts
@@ -32,6 +32,10 @@ const colorList = () => {
             type: evaluate(new NamedExpression('bool'), scope),
             color: getComputedColor('--type-color-bool'),
         },
+        {
+            type: evaluate(new NamedExpression('Color'), scope),
+            color: getComputedColor('--type-color-color'),
+        },
         {
             type: evaluate(new NamedExpression('PyTorchModel'), scope),
             color: getComputedColor('--type-color-torch'),