用途:从任意起点(品牌色、已有设计系统)生成和谐、可访问、可用于生产的配色系统,并支持扩展既有设计系统而非替换。
主要能力:
- 使用 OKLCH 生成调色板(L 通道感知均匀,比 HSL 更一致)。
- 由品牌色生成 11 级明度色阶(50、100-900、950),并生成带品牌色微调的中性色。
- 定义 success/warning/error/info 等语义色。
- 进行 WCAG 2.2 对比度检查(AA、AAA),并给出实际配对测量。
- 深色模式语义重映射(不直接反转色阶)。
- 生成渐变(含 oklch 插值、mesh 渐变)。
- 导出为 CSS 自定义属性(三层架构)或 Tailwind v3/v4 配置。
必要用法:
- 先读取 .agents/design-context.md,如有 Color System 则以其十六进制值为准并扩展。
- 命名约定:primitive 为 --brand-50…--brand-950、--gray-、--success- 等;semantic 为 --bg-、--text-、--border-、--interactive- 及 --color-primary 等。
- 可用命令: python <color-palette>/scripts/palette.py --from "#2563eb" python <color-palette>/scripts/palette.py 250 0.15 --name brand --css python <color-palette>/scripts/palette.py 250 0.02 --name gray --json python <design-context>/scripts/contrast.py "#ffffff" "#2563eb" palette.py 输出每步十六进制及与黑/白对比度,越界色阶会降低 chroma 而非明度和色相;contrast.py 失败时退出码为 1 并给出最接近的合格色阶。
- 视觉验证:生成色板 HTML 并用截图查看,例如 npx playwright screenshot --full-page "file://$PWD/swatches.html" swatches.png,深色模式加 --color-scheme=dark。
- 可将十六进制值写回 .agents/design-context.md,仅更新变化的 Color System 行,保存前需用户确认。
适用场景:Web/产品界面配色系统搭建、设计系统维护、深浅色主题、图表与徽章语义色、Tailwind 项目。
限制:OKLCH 高 chroma 值可能超出 sRGB,转十六进制需降 chroma;渐变插值需显式 in oklch,否则浏览器可能走灰色死区;对比度必须实测,OKLCH 明度差仅用于选候选;APCA 仅为 WCAG 3 草案候选,不能作为合规标准报告;完整深色主题(高程表面、图片、开关)需交给 dark-mode 技能处理。