Palette Editor配色编辑器

安装

用法

import { PaletteEditor } from "@/components/ui/palette-editor/palette-editor"

export function SeriesColors() {
  return <PaletteEditor defaultValue={["#172554", "#38bdf8", "#fef3c7"]} />
}

用 value / onValueChange 控制 HEX 数组，onValueCommit 在编辑结束、增删、排序或选择预设时触发。列表上方的色带按当前色觉视角显示整组颜色，切换视角就能直接对比；每行的 HEX 始终是原色。新增颜色时在末项基础上旋转色相，避免和已有颜色撞色。

示例

色觉模拟

始终检查四种视角，切换视角查看模拟色。提示不会阻止编辑。

预设

选择预设后复制颜色数组，后续编辑不会修改预设。

自定义检查规则

项目已有自己的配色规则时，用 findConflicts 替代内置检查，让提示和项目其他地方的检查来自同一个函数。传入后 threshold 不再生效。函数在颜色每次变化时都会运行，不要放耗时操作；返回值里的 a、b 是从 0 开始的颜色索引。

数量上下限

minItems / maxItems 控制增删按钮，这里允许 2–4 项。

API

string[] | undefined

string[] | undefined

((value: string[]) => void) | undefined

((value: string[]) => void) | undefined

number | undefined

number | undefined

number | undefined

((colors: string[]) => ColorConflict[]) | undefined

{ label: string; colors: string[]; }[] | undefined

Partial<{ normal: string; protanopia: string; deuteranopia: string; tritanopia: string; vision: string; add: string; up: string; down: string; remove: string; warning: string; presets: string; color: (n: number) => string; moved: (n: number, m: number, k: number) => string; preview: string; conflict: (a: number, b: number, vision: string, d: number) => string; }> | undefined

boolean | undefined

boolean | undefined

string | undefined

string | undefined

导出 PaletteEditorProps 和 PaletteEditorLabels。labels 可覆盖文本及 color(n)、moved(n,m,k)、conflict(a,b,vision,deltaE) 格式函数。

可访问性

每行包含序号、带可访问名称的颜色输入及常显排序、删除按钮。按钮聚焦时 Alt + ↑ / ↓ 排序；输入框及弹层内不拦截快捷键。排序保留行的稳定 key，并用 polite 实时区域播报位置。有冲突的行在序号旁显示警示图标（附屏幕阅读器文字），冲突明细以文字列在列表下方，不只靠颜色表达。

注意事项

name / form 用隐藏输入提交 JSON 字符串数组，非受控表单支持 reset。disabled 不提交字段，readOnly 保留提交但禁止编辑。外部传入的数组应为有效 HEX，且数量在上下限内。默认最少 1 项、最多 12 项，阈值 10。

色觉模拟用于辅助检查，不代表所有人的实际感知；ΔE00 也不等同于文字对比度合规。

源码