diff --git a/web/src/components/baInput/index.ts b/web/src/components/baInput/index.ts
index d27e7d3e..ed9c6add 100644
--- a/web/src/components/baInput/index.ts
+++ b/web/src/components/baInput/index.ts
@@ -24,6 +24,7 @@ export const inputTypes = [
     'file',
     'files',
     'icon',
+    'color'
 ]
 export type modelValueTypes = string | number | boolean | object
 
diff --git a/web/src/components/baInput/index.vue b/web/src/components/baInput/index.vue
index 95016724..eaa51db1 100644
--- a/web/src/components/baInput/index.vue
+++ b/web/src/components/baInput/index.vue
@@ -375,6 +375,17 @@ export default defineComponent({
                         })
                 },
             ],
+            [
+                'color',
+                () => {
+                    return () =>
+                        createVNode(resolveComponent('el-color-picker'), {
+                            modelValue: props.modelValue,
+                            'onUpdate:modelValue': onValueUpdate,
+                            ...props.attr,
+                        })
+                },
+            ],
             [
                 'editor',
                 () => {
diff --git a/web/src/components/formItem/index.vue b/web/src/components/formItem/index.vue
index 40023334..7dd45db2 100644
--- a/web/src/components/formItem/index.vue
+++ b/web/src/components/formItem/index.vue
@@ -96,6 +96,7 @@ export default defineComponent({
             'remoteSelect',
             'city',
             'icon',
+            'color'
         ] // 不带独立label输入框
         let needLabelSlot = ['radio', 'checkbox', 'switch', 'array', 'image', 'images', 'file', 'files', 'editor'] // 需要独立label的输入框
         if (noNeedLabelSlot.includes(props.type)) {
diff --git a/web/src/components/table/fieldRender/index.vue b/web/src/components/table/fieldRender/index.vue
index c654359c..d70ae086 100644
--- a/web/src/components/table/fieldRender/index.vue
+++ b/web/src/components/table/fieldRender/index.vue
@@ -90,7 +90,10 @@
     <div v-if="field.render == 'datetime'">
         {{ !fieldValue ? '-' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
     </div>
-
+    <!-- color -->
+    <div v-if="field.render == 'color'">
+        <div :style="{background:fieldValue}" class="el-color"></div>
+    </div>
     <!-- customTemplate 自定义模板 -->
     <div
         v-if="field.render == 'customTemplate'"
@@ -305,4 +308,8 @@ const getTagType = (value: string, custom: any): TagProps['type'] => {
 .ml-6 + .el-button {
     margin-left: 6px;
 }
+.el-color{
+    height:25px;
+    width:100%
+}
 </style>