diff --git a/src/option/ColorOption.vue b/src/option/ColorOption.vue
new file mode 100644
index 0000000..212c91b
--- /dev/null
+++ b/src/option/ColorOption.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { NColorPicker } from 'naive-ui'
+
+defineProps<{
+  value: string
+  onUpdate: (value: string) => void
+}>()
+</script>
+
+<template>
+  <NColorPicker
+    :modes="['hex']"
+    show-preview
+    :value="value"
+    @update:value="onUpdate"
+  />
+</template>
diff --git a/src/util.ts b/src/util.ts
index 24aa80b..e18604e 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -5,6 +5,7 @@ import IntegerOption from './option/IntegerOption.vue'
 import BooleanOption from './option/BooleanOption.vue'
 import EnumOption from './option/EnumOption.vue'
 import KeyOption from './option/KeyOption.vue'
+import ColorOption from './option/ColorOption.vue'
 import StringOption from './option/StringOption.vue'
 import ExternalOption from './option/ExternalOption.vue'
 import ListOption from './option/ListOption.vue'
@@ -39,6 +40,8 @@ export function toComponent(child: { Type: string, Children?: any[] | null } & {
       return EnumOption
     case 'Key':
       return KeyOption
+    case 'Color':
+      return ColorOption
     case 'String':
       if (child.IsEnum === 'True') {
         return EnumOption