diff --git a/dashboard/src/components/shared/ConfigItemRenderer.vue b/dashboard/src/components/shared/ConfigItemRenderer.vue
index 5f2341ee7..68ba5da4c 100644
--- a/dashboard/src/components/shared/ConfigItemRenderer.vue
+++ b/dashboard/src/components/shared/ConfigItemRenderer.vue
@@ -120,7 +120,16 @@
       </v-btn>
     </div>
 
-    <v-text-field
+    <!-- 若 string 类型且标记了 widget: 'palette'，则渲染调色盘 -->
+	<PaletteEditor
+      v-else-if="itemMeta?.type === 'string' && itemMeta?.widget === WIDGET_PALETTE"
+      :model-value="modelValue"
+      @update:model-value="emitUpdate"
+      :format="itemMeta?.widget_props?.format"
+      class="config-field"
+    />
+
+	<v-text-field
       v-else-if="itemMeta?.type === 'string'"
       :model-value="modelValue"
       @update:model-value="emitUpdate"
@@ -225,6 +234,8 @@ import PersonaSelector from './PersonaSelector.vue'
 import KnowledgeBaseSelector from './KnowledgeBaseSelector.vue'
 import PluginSetSelector from './PluginSetSelector.vue'
 import T2ITemplateEditor from './T2ITemplateEditor.vue'
+import PaletteEditor from './PaletteEditor.vue'
+import { WIDGET_PALETTE } from '@/utils/color'
 import { useI18n, useModuleI18n } from '@/i18n/composables'
 
 const props = defineProps({
diff --git a/dashboard/src/components/shared/PaletteEditor.vue b/dashboard/src/components/shared/PaletteEditor.vue
new file mode 100644
index 000000000..3d1d61c0d
--- /dev/null
+++ b/dashboard/src/components/shared/PaletteEditor.vue
@@ -0,0 +1,456 @@
+<template>
+  <div class="palette-editor">
+    <div class="d-flex align-center gap-2">
+      <v-menu
+        v-model="menuOpen"
+        :close-on-content-click="false"
+        location="bottom start"
+        transition="fade-transition"
+      >
+        <template #activator="{ props: menuProps }">
+          <div
+            v-bind="menuProps"
+            class="color-preview-btn"
+            :style="{ backgroundColor: previewColor }"
+            :title="t('core.common.palette.clickToSelect')"
+          >
+            <v-icon v-if="!hasColor" size="small" color="grey">mdi-palette</v-icon>
+          </div>
+        </template>
+
+        <v-card class="palette-popup" width="300">
+          <v-color-picker
+            v-model="pickerColor"
+            :modes="['hex', 'rgb', 'hsl']"
+            hide-inputs
+            elevation="0"
+            width="300"
+          />
+
+          <v-divider />
+
+          <v-card-text class="pa-3">
+            <div class="format-row mb-2">
+              <span class="format-label">{{ t('core.common.palette.formatHex') }}</span>
+              <v-text-field
+                v-model="hexInput"
+                density="compact"
+                variant="outlined"
+                hide-details
+                class="format-input"
+                @update:model-value="onHexInput"
+                @blur="syncFromPicker"
+              />
+              <v-btn
+                icon
+                size="x-small"
+                variant="text"
+                @click="copyToClipboard(hexInput)"
+                :title="t('core.common.copy')"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+              </v-btn>
+            </div>
+
+            <div class="format-row mb-2">
+              <span class="format-label">{{ t('core.common.palette.formatRgb') }}</span>
+              <v-text-field
+                v-model="rgbInput"
+                density="compact"
+                variant="outlined"
+                hide-details
+                class="format-input"
+                @update:model-value="onRgbInput"
+                @blur="syncFromPicker"
+              />
+              <v-btn
+                icon
+                size="x-small"
+                variant="text"
+                @click="copyToClipboard(rgbInput)"
+                :title="t('core.common.copy')"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+              </v-btn>
+            </div>
+
+            <div class="format-row">
+              <span class="format-label">{{ t('core.common.palette.formatHsv') }}</span>
+              <v-text-field
+                v-model="hsvInput"
+                density="compact"
+                variant="outlined"
+                hide-details
+                class="format-input"
+                @update:model-value="onHsvInput"
+                @blur="syncFromPicker"
+              />
+              <v-btn
+                icon
+                size="x-small"
+                variant="text"
+                @click="copyToClipboard(hsvInput)"
+                :title="t('core.common.copy')"
+              >
+                <v-icon size="small">mdi-content-copy</v-icon>
+              </v-btn>
+            </div>
+          </v-card-text>
+
+          <v-divider />
+
+          <v-card-actions class="justify-space-between pa-2">
+            <div class="d-flex gap-1">
+              <v-btn
+                size="small"
+                variant="text"
+                prepend-icon="mdi-content-paste"
+                @click="pasteFromClipboard"
+              >
+                {{ t('core.common.palette.paste') }}
+              </v-btn>
+            </div>
+            <div class="d-flex gap-1">
+              <v-btn
+                size="small"
+                variant="text"
+                @click="clearColor"
+              >
+                {{ t('core.common.clear') }}
+              </v-btn>
+              <v-btn
+                size="small"
+                color="primary"
+                variant="tonal"
+                @click="confirmColor"
+              >
+                {{ t('core.common.confirm') }}
+              </v-btn>
+            </div>
+          </v-card-actions>
+        </v-card>
+      </v-menu>
+
+      <v-text-field
+        v-model="localValue"
+        @update:model-value="onInputValueChange"
+        @paste="onPaste"
+        density="compact"
+        variant="outlined"
+        class="config-field flex-grow-1"
+        hide-details
+        :placeholder="formatPlaceholder"
+        :error="!!validationError"
+        :title="validationError"
+      />
+      <v-icon
+        v-if="validationError"
+        size="small"
+        color="warning"
+        :title="validationError"
+      >
+        mdi-alert-circle-outline
+      </v-icon>
+    </div>
+
+    <v-snackbar v-model="snackbar" :timeout="1500" location="top">
+      {{ snackbarText }}
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from '@/i18n/composables'
+import {
+  hexToRgb,
+  rgbToHex,
+  rgbToHsv,
+  parseAnyColor,
+  ColorFormat,
+  type ColorFormatType,
+  type RgbColor
+} from '@/utils/color'
+
+interface Props {
+  modelValue?: string
+  format?: ColorFormatType
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  format: ColorFormat.HEX
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+const { t } = useI18n()
+
+const menuOpen = ref(false)
+const localValue = ref(props.modelValue)
+const pickerColor = ref('#FFFFFF')
+const hexInput = ref('#FFFFFF')
+const rgbInput = ref('rgb(255, 255, 255)')
+const hsvInput = ref('hsv(0, 0%, 100%)')
+const snackbar = ref(false)
+const snackbarText = ref('')
+
+const formatPlaceholder = computed(() => {
+  switch (props.format) {
+    case ColorFormat.RGB: return t('core.common.palette.placeholderRgb')
+    case ColorFormat.HSV: return t('core.common.palette.placeholderHsv')
+    default: return t('core.common.palette.placeholderHex')
+  }
+})
+
+const hasColor = computed(() => {
+  return localValue.value && localValue.value.trim() !== ''
+})
+
+const previewColor = computed(() => {
+  if (!hasColor.value) return '#FFFFFF'
+  const parsed = parseAnyColor(localValue.value)
+  return parsed ? rgbToHex(parsed.r, parsed.g, parsed.b) : '#FFFFFF'
+})
+
+const validationError = computed(() => {
+  if (!hasColor.value) return ''
+  const parsed = parseAnyColor(localValue.value)
+  if (!parsed) {
+    return t('core.common.palette.invalidFormat')
+  }
+  return ''
+})
+
+function parsePickerColor(color: string | RgbColor | null | undefined): RgbColor {
+  if (!color) return { r: 255, g: 255, b: 255 }
+  if (typeof color === 'string') {
+    return hexToRgb(color) || { r: 255, g: 255, b: 255 }
+  }
+  if (typeof color === 'object') {
+    return { r: color.r || 0, g: color.g || 0, b: color.b || 0 }
+  }
+  return { r: 255, g: 255, b: 255 }
+}
+
+function formatOutput(r: number, g: number, b: number): string {
+  switch (props.format) {
+    case ColorFormat.RGB:
+      return `rgb(${r}, ${g}, ${b})`
+    case ColorFormat.HSV: {
+      const hsv = rgbToHsv(r, g, b)
+      return `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`
+    }
+    default:
+      return rgbToHex(r, g, b)
+  }
+}
+
+function syncInputsFromColor(r: number, g: number, b: number): void {
+  hexInput.value = rgbToHex(r, g, b)
+  rgbInput.value = `rgb(${r}, ${g}, ${b})`
+  const hsv = rgbToHsv(r, g, b)
+  hsvInput.value = `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`
+}
+
+function syncFromPicker() {
+  const color = parsePickerColor(pickerColor.value)
+  syncInputsFromColor(color.r, color.g, color.b)
+}
+
+watch(pickerColor, () => {
+  syncFromPicker()
+})
+
+function syncInternalState() {
+  if (hasColor.value) {
+    const parsed = parseAnyColor(localValue.value)
+    if (parsed) {
+      const newHex = rgbToHex(parsed.r, parsed.g, parsed.b)
+      if (pickerColor.value !== newHex) {
+        pickerColor.value = newHex
+        syncInputsFromColor(parsed.r, parsed.g, parsed.b)
+      }
+    }
+  } else {
+    pickerColor.value = '#FFFFFF'
+    syncInputsFromColor(255, 255, 255)
+  }
+}
+
+watch(menuOpen, (open) => {
+  if (open) syncInternalState()
+})
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal !== localValue.value) {
+    localValue.value = newVal
+    syncInternalState()
+  }
+})
+
+function onHexInput(value: string): void {
+  const parsed = parseAnyColor(value)
+  if (parsed) {
+    pickerColor.value = rgbToHex(parsed.r, parsed.g, parsed.b)
+    rgbInput.value = `rgb(${parsed.r}, ${parsed.g}, ${parsed.b})`
+    const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b)
+    hsvInput.value = `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`
+  }
+}
+
+function onRgbInput(value: string): void {
+  const parsed = parseAnyColor(value)
+  if (parsed) {
+    pickerColor.value = rgbToHex(parsed.r, parsed.g, parsed.b)
+    hexInput.value = rgbToHex(parsed.r, parsed.g, parsed.b)
+    const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b)
+    hsvInput.value = `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`
+  }
+}
+
+function onHsvInput(value: string): void {
+  const parsed = parseAnyColor(value)
+  if (parsed) {
+    pickerColor.value = rgbToHex(parsed.r, parsed.g, parsed.b)
+    hexInput.value = rgbToHex(parsed.r, parsed.g, parsed.b)
+    rgbInput.value = `rgb(${parsed.r}, ${parsed.g}, ${parsed.b})`
+  }
+}
+
+function confirmColor() {
+  const color = parsePickerColor(pickerColor.value)
+  emit('update:modelValue', formatOutput(color.r, color.g, color.b))
+  menuOpen.value = false
+}
+
+function clearColor() {
+  emit('update:modelValue', '')
+  menuOpen.value = false
+}
+
+function onInputValueChange(value: string): void {
+  localValue.value = value
+  const parsed = parseAnyColor(value)
+  if (parsed) {
+    // 只有当输入有效时，才向父组件发送规范化后的值
+    emit('update:modelValue', formatOutput(parsed.r, parsed.g, parsed.b))
+    // 同时更新内部拾色器状态，以便预览正确
+    pickerColor.value = rgbToHex(parsed.r, parsed.g, parsed.b)
+  }
+}
+
+async function copyToClipboard(text: string): Promise<void> {
+  if (!navigator.clipboard) {
+    snackbarText.value = t('core.common.palette.copyFailed')
+    snackbar.value = true
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(text)
+    snackbarText.value = t('core.common.copied')
+    snackbar.value = true
+  } catch {
+    snackbarText.value = t('core.common.palette.copyFailed')
+    snackbar.value = true
+  }
+}
+
+async function pasteFromClipboard() {
+  if (!navigator.clipboard) {
+    snackbarText.value = t('core.common.palette.pasteFailed')
+    snackbar.value = true
+    return
+  }
+  try {
+    const text = await navigator.clipboard.readText()
+    const parsed = parseAnyColor(text.trim())
+    if (parsed) {
+      pickerColor.value = rgbToHex(parsed.r, parsed.g, parsed.b)
+      syncInputsFromColor(parsed.r, parsed.g, parsed.b)
+      snackbarText.value = t('core.common.palette.pasteSuccess')
+      snackbar.value = true
+    } else {
+      snackbarText.value = t('core.common.palette.pasteInvalid')
+      snackbar.value = true
+    }
+  } catch {
+    snackbarText.value = t('core.common.palette.pasteFailed')
+    snackbar.value = true
+  }
+}
+
+function onPaste(event: ClipboardEvent): void {
+  const text = event.clipboardData?.getData('text')
+  if (text) {
+    const parsed = parseAnyColor(text.trim())
+    if (parsed) {
+      event.preventDefault()
+      emit('update:modelValue', formatOutput(parsed.r, parsed.g, parsed.b))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.palette-editor {
+  width: 100%;
+}
+
+.color-preview-btn {
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: box-shadow 0.2s;
+}
+
+.color-preview-btn:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.palette-popup {
+  overflow: hidden;
+}
+
+.format-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.format-label {
+  width: 36px;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.format-input {
+  flex: 1;
+}
+
+.format-input :deep(.v-field__input) {
+  font-size: 12px;
+  font-family: monospace;
+  padding: 4px 8px;
+}
+
+.config-field {
+  margin-bottom: 0;
+}
+
+:deep(.v-color-picker) {
+  border-radius: 0;
+}
+
+:deep(.v-field__input) {
+  font-size: 14px;
+}
+</style>
diff --git a/dashboard/src/i18n/locales/en-US/core/common.json b/dashboard/src/i18n/locales/en-US/core/common.json
index 787c24669..b65f3f8ba 100644
--- a/dashboard/src/i18n/locales/en-US/core/common.json
+++ b/dashboard/src/i18n/locales/en-US/core/common.json
@@ -104,5 +104,24 @@
     "edit": "Edit",
     "copy": "Copy",
     "noData": "No data available"
+  },
+  "clear": "Clear",
+  "palette": {
+    "clickToSelect": "Click to select color",
+    "placeholder": "#RRGGBB or color name",
+    "paste": "Paste",
+    "pasteSuccess": "Color parsed successfully",
+    "pasteInvalid": "Invalid color format",
+    "pasteFailed": "Failed to read clipboard",
+    "pickScreen": "Pick",
+    "pickSuccess": "Color picked from screen",
+    "invalidFormat": "Invalid color format",
+    "copyFailed": "Failed to copy to clipboard",
+    "formatHex": "HEX",
+    "formatRgb": "RGB",
+    "formatHsv": "HSV",
+    "placeholderHex": "#RRGGBB",
+    "placeholderRgb": "rgb(255, 255, 255)",
+    "placeholderHsv": "hsv(0, 0%, 100%)"
   }
-}
+}
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/zh-CN/core/common.json b/dashboard/src/i18n/locales/zh-CN/core/common.json
index 658a93338..81019d0fc 100644
--- a/dashboard/src/i18n/locales/zh-CN/core/common.json
+++ b/dashboard/src/i18n/locales/zh-CN/core/common.json
@@ -104,5 +104,24 @@
     "edit": "编辑",
     "copy": "复制",
     "noData": "暂无数据"
+  },
+  "clear": "清除",
+  "palette": {
+    "clickToSelect": "点击选择颜色",
+    "placeholder": "#RRGGBB 或颜色名称",
+    "paste": "粘贴",
+    "pasteSuccess": "颜色解析成功",
+    "pasteInvalid": "无效的颜色格式",
+    "pasteFailed": "无法读取剪贴板",
+    "pickScreen": "取色",
+    "pickSuccess": "已从屏幕取色",
+    "invalidFormat": "颜色格式无效",
+    "copyFailed": "复制到剪贴板失败",
+    "formatHex": "HEX",
+    "formatRgb": "RGB",
+    "formatHsv": "HSV",
+    "placeholderHex": "#RRGGBB",
+    "placeholderRgb": "rgb(255, 255, 255)",
+    "placeholderHsv": "hsv(0, 0%, 100%)"
   }
-}
+}
\ No newline at end of file
diff --git a/dashboard/src/utils/color.ts b/dashboard/src/utils/color.ts
new file mode 100644
index 000000000..f35d1c0de
--- /dev/null
+++ b/dashboard/src/utils/color.ts
@@ -0,0 +1,121 @@
+/**
+ * 颜色处理工具模块
+ */
+
+export const ColorFormat = {
+  HEX: 'hex',
+  RGB: 'rgb',
+  HSV: 'hsv'
+} as const;
+
+export type ColorFormatType = typeof ColorFormat[keyof typeof ColorFormat];
+
+/** 定义用于在配置元数据中识别调色盘组件的常量 */
+export const WIDGET_PALETTE = 'palette';
+
+export interface RgbColor {
+  r: number;
+  g: number;
+  b: number;
+}
+
+export interface HsvColor {
+  h: number;
+  s: number;
+  v: number;
+}
+
+export function hexToRgb(hex: string): RgbColor | null {
+  if (!hex || typeof hex !== 'string') return null
+  hex = hex.replace('#', '')
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(hex)) return null
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  }
+  const num = parseInt(hex, 16)
+  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 }
+}
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (v: number) => Math.max(0, Math.min(255, Math.round(v) || 0))
+    .toString(16).padStart(2, '0').toUpperCase()
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+export function rgbToHsv(r: number, g: number, b: number): HsvColor {
+  r /= 255; g /= 255; b /= 255
+  const max = Math.max(r, g, b), min = Math.min(r, g, b)
+  const d = max - min
+  let h = 0, s = max === 0 ? 0 : d / max, v = max
+  if (max !== min) {
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break
+      case g: h = (b - r) / d + 2; break
+      case b: h = (r - g) / d + 4; break
+    }
+    h /= 6
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    v: Math.round(v * 100)
+  }
+}
+
+export function hsvToRgb(h: number, s: number, v: number): RgbColor {
+  // 限制输入值范围
+  h = Math.max(0, Math.min(360, h))
+  s = Math.max(0, Math.min(100, s))
+  v = Math.max(0, Math.min(100, v))
+
+  h /= 360; s /= 100; v /= 100
+  let r = 0, g = 0, b = 0
+  const i = Math.floor(h * 6)
+  const f = h * 6 - i
+  const p = v * (1 - s)
+  const q = v * (1 - f * s)
+  const tt = v * (1 - (1 - f) * s)
+  switch (i % 6) {
+    case 0: r = v; g = tt; b = p; break
+    case 1: r = q; g = v; b = p; break
+    case 2: r = p; g = v; b = tt; break
+    case 3: r = p; g = q; b = v; break
+    case 4: r = tt; g = p; b = v; break
+    case 5: r = v; g = p; b = q; break
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  }
+}
+
+export function parseAnyColor(value: string): RgbColor | null {
+  if (!value || typeof value !== 'string') return null
+  value = value.trim()
+
+  const hexMatch = value.match(/^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/)
+  if (hexMatch) {
+    return hexToRgb(hexMatch[0].startsWith('#') ? hexMatch[0] : '#' + hexMatch[0])
+  }
+
+  const rgbMatch = value.match(/^rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i)
+  if (rgbMatch) {
+    return {
+      r: Math.min(255, parseInt(rgbMatch[1])),
+      g: Math.min(255, parseInt(rgbMatch[2])),
+      b: Math.min(255, parseInt(rgbMatch[3]))
+    }
+  }
+
+  const hsvMatch = value.match(/^hsv\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*\)$/i)
+  if (hsvMatch) {
+    return hsvToRgb(
+      Math.min(360, parseInt(hsvMatch[1])),
+      Math.min(100, parseInt(hsvMatch[2])),
+      Math.min(100, parseInt(hsvMatch[3]))
+    )
+  }
+
+  return null
+}
\ No newline at end of file