diff --git a/code/datums/colormate.dm b/code/datums/colormate.dm
index 2149191543..06460069a0 100644
--- a/code/datums/colormate.dm
+++ b/code/datums/colormate.dm
@@ -108,6 +108,16 @@
 			if("set_matrix_color")
 				color_matrix_last[params["color"]] = params["value"]
 				return TRUE
+			if("set_matrix_string")
+				if(params["value"])
+					var/list/colours = splittext(params["value"], ",")
+					if(colours.len > 12)
+						colours.Cut(13)
+					for(var/i = 1, i <= colours.len, i++)
+						var/number = text2num(colours[i])
+						if(isnum(number))
+							color_matrix_last[i] = clamp(number, -10, 10)
+				return TRUE
 			if("set_hue")
 				build_hue = clamp(text2num(params["buildhue"]), 0, 360)
 				return TRUE
diff --git a/code/game/machinery/painter_vr.dm b/code/game/machinery/painter_vr.dm
index 53614b2f90..c34eeb8f97 100644
--- a/code/game/machinery/painter_vr.dm
+++ b/code/game/machinery/painter_vr.dm
@@ -189,6 +189,16 @@
 			if("set_matrix_color")
 				color_matrix_last[params["color"]] = params["value"]
 				return TRUE
+			if("set_matrix_string")
+				if(params["value"])
+					var/list/colours = splittext(params["value"], ",")
+					if(colours.len > 12)
+						colours.Cut(13)
+					for(var/i = 1, i <= colours.len, i++)
+						var/number = text2num(colours[i])
+						if(isnum(number))
+							color_matrix_last[i] = clamp(number, -10, 10)
+				return TRUE
 			if("set_hue")
 				build_hue = clamp(text2num(params["buildhue"]), 0, 360)
 				return TRUE
diff --git a/tgui/packages/tgui/interfaces/ColorMate/ColorMateMatrix.tsx b/tgui/packages/tgui/interfaces/ColorMate/ColorMateMatrix.tsx
index dc6be8c92a..903d4c4a02 100644
--- a/tgui/packages/tgui/interfaces/ColorMate/ColorMateMatrix.tsx
+++ b/tgui/packages/tgui/interfaces/ColorMate/ColorMateMatrix.tsx
@@ -1,7 +1,14 @@
 import { toFixed } from 'common/math';
 
 import { useBackend } from '../../backend';
-import { Icon, NumberInput, Table } from '../../components';
+import {
+  Box,
+  Icon,
+  Input,
+  LabeledList,
+  NumberInput,
+  Table,
+} from '../../components';
 import { Data } from './types';
 
 export const ColorMateMatrix = (props) => {
@@ -10,226 +17,241 @@ export const ColorMateMatrix = (props) => {
   const { matrixcolors } = data;
 
   return (
-    <Table>
-      <Table.Cell>
-        <Table.Row>
-          RR:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.rr}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 1,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-        <Table.Row>
-          GR:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.gr}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 4,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-        <Table.Row>
-          BR:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.br}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 7,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-      </Table.Cell>
-      <Table.Cell>
-        <Table.Row>
-          RG:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.rg}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 2,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-        <Table.Row>
-          GG:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.gg}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 5,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-        <Table.Row>
-          BG:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.bg}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 8,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-      </Table.Cell>
-      <Table.Cell>
-        <Table.Row>
-          RB:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.rb}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 3,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-        <Table.Row>
-          GB:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.gb}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 6,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-        <Table.Row>
-          BB:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.bb}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 9,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-      </Table.Cell>
-      <Table.Cell>
-        <Table.Row>
-          CR:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.cr}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 10,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-        <Table.Row>
-          CG:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.cg}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 11,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-        <Table.Row>
-          CB:
-          <NumberInput
-            width="50px"
-            minValue={-10}
-            maxValue={10}
-            step={0.01}
-            value={matrixcolors.cb}
-            format={(value: number) => toFixed(value, 2)}
-            onChange={(value: number) =>
-              act('set_matrix_color', {
-                color: 12,
-                value,
-              })
-            }
-          />
-        </Table.Row>
-      </Table.Cell>
-      <Table.Cell width="40%">
-        <Icon name="question-circle" color="blue" /> RG means red will become
-        this much green.
-        <br />
-        <Icon name="question-circle" color="blue" /> CR means this much red will
-        be added.
-      </Table.Cell>
-    </Table>
+    <>
+      <Table>
+        <Table.Cell>
+          <Table.Row>
+            RR:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.rr}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 1,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+          <Table.Row>
+            GR:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.gr}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 4,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+          <Table.Row>
+            BR:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.br}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 7,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+        </Table.Cell>
+        <Table.Cell>
+          <Table.Row>
+            RG:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.rg}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 2,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+          <Table.Row>
+            GG:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.gg}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 5,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+          <Table.Row>
+            BG:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.bg}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 8,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+        </Table.Cell>
+        <Table.Cell>
+          <Table.Row>
+            RB:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.rb}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 3,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+          <Table.Row>
+            GB:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.gb}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 6,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+          <Table.Row>
+            BB:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.bb}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 9,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+        </Table.Cell>
+        <Table.Cell>
+          <Table.Row>
+            CR:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.cr}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 10,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+          <Table.Row>
+            CG:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.cg}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 11,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+          <Table.Row>
+            CB:
+            <NumberInput
+              width="50px"
+              minValue={-10}
+              maxValue={10}
+              step={0.01}
+              value={matrixcolors.cb}
+              format={(value: number) => toFixed(value, 2)}
+              onChange={(value: number) =>
+                act('set_matrix_color', {
+                  color: 12,
+                  value,
+                })
+              }
+            />
+          </Table.Row>
+        </Table.Cell>
+        <Table.Cell width="40%">
+          <Icon name="question-circle" color="blue" /> RG means red will become
+          this much green.
+          <br />
+          <Icon name="question-circle" color="blue" /> CR means this much red
+          will be added.
+        </Table.Cell>
+      </Table>
+      <Box mt={3}>
+        <LabeledList>
+          <LabeledList.Item label="Config">
+            <Input
+              fluid
+              value={Object.values(matrixcolors).toString()}
+              onChange={(e, value: string) =>
+                act('set_matrix_string', { value })
+              }
+            />
+          </LabeledList.Item>
+        </LabeledList>
+      </Box>
+    </>
   );
 };