diff --git a/packages/types/src/inputs.ts b/packages/types/src/inputs.ts
index 9c841a8..c7d10ec 100644
--- a/packages/types/src/inputs.ts
+++ b/packages/types/src/inputs.ts
@@ -32,6 +32,12 @@ export const NodeInputFloatSchema = z.object({
   step: z.number().optional()
 });
 
+export const NodeInputColorSchema = z.object({
+  ...DefaultOptionsSchema.shape,
+  type: z.literal('color'),
+  value: z.array(z.number()).optional()
+});
+
 export const NodeInputIntegerSchema = z.object({
   ...DefaultOptionsSchema.shape,
   type: z.literal('integer'),
@@ -87,6 +93,7 @@ export const NodeInputSchema = z.union([
   NodeInputSeedSchema,
   NodeInputBooleanSchema,
   NodeInputFloatSchema,
+  NodeInputColorSchema,
   NodeInputIntegerSchema,
   NodeInputShapeSchema,
   NodeInputSelectSchema,
diff --git a/packages/ui/src/lib/Input.svelte b/packages/ui/src/lib/Input.svelte
index 804eb3a..437d35c 100644
--- a/packages/ui/src/lib/Input.svelte
+++ b/packages/ui/src/lib/Input.svelte
@@ -29,7 +29,7 @@
 {:else if input.type === 'shape'}
   <InputShape bind:value={value as number[]} />
 {:else if input.type === 'color'}
-  <InputColor bind:value={value as number[]} />
+  <InputColor bind:value={value as [number, number, number]} />
 {:else if input.type === 'integer'}
   <InputNumber
     bind:value={value as number}
diff --git a/packages/ui/src/lib/inputs/InputShape.svelte b/packages/ui/src/lib/inputs/InputShape.svelte
index 9c6a6ca..be394bb 100644
--- a/packages/ui/src/lib/inputs/InputShape.svelte
+++ b/packages/ui/src/lib/inputs/InputShape.svelte
@@ -51,7 +51,7 @@
     if (mirror) {
       const _points: [number, number, number][] = [];
       for (let i = 0; i < points.length / 2; i++) {
-        const pt = [...getPt(i), i];
+        const pt = [...getPt(i), i] as [number, number, number];
         if (pt[0] > 50) {
           pt[0] = 100 - pt[0];
         }
diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte
index 8d32719..829faf0 100644
--- a/packages/ui/src/routes/+page.svelte
+++ b/packages/ui/src/routes/+page.svelte
@@ -37,7 +37,7 @@
   </div>
 
   <Section title="InputNumber">
-    <Theme theme />
+    <Theme />
   </Section>
 
   <Section title="InputNumber">
diff --git a/packages/ui/src/routes/Theme.svelte b/packages/ui/src/routes/Theme.svelte
index ae91532..b836a18 100644
--- a/packages/ui/src/routes/Theme.svelte
+++ b/packages/ui/src/routes/Theme.svelte
@@ -1,12 +1,6 @@
 <script lang="ts">
   import { InputColor } from '$lib';
 
-  interface Props {
-    theme?: string;
-  }
-
-  let { theme }: Props = $props();
-
   const colors = [
     'layer-0',
     'layer-1',
@@ -19,6 +13,20 @@
     'text'
   ];
 
+  type CustomColors = {
+    text: [number, number, number];
+    outline: [number, number, number];
+    'layer-0': [number, number, number];
+    'layer-1': [number, number, number];
+    'layer-2': [number, number, number];
+    'layer-3': [number, number, number];
+    active: [number, number, number];
+    selected: [number, number, number];
+    connection: [number, number, number];
+  };
+
+  type CustomColorKey = keyof CustomColors;
+
   let customColors = $state<CustomColors>({
     text: [205, 214, 244],
     outline: [62, 62, 79],
@@ -36,7 +44,7 @@
   ${
       Object.keys(customColors)
         .map((v) => {
-          return `--color-${v}: rgb(${customColors[v].join(',')});`;
+          return `--color-${v}: rgb(${customColors[v as CustomColorKey].join(',')});`;
         })
         .join('\n')
     }</style>`;
@@ -63,7 +71,7 @@
         </td>
         <td>{color}</td>
         <td>
-          <InputColor bind:value={customColors[color]} />
+          <InputColor bind:value={customColors[color as CustomColorKey]} />
         </td>
       </tr>
     {/each}