ColorPalette Pro 智能配色与无障碍设计工作台

ColorPalette Pro · 智能配色与无障碍设计工作台

项目简介

ColorPalette Pro 是一款专为前端工程师、UI/UX 设计师及产品团队打造的现代纯前端智能调色与无障碍色彩分析工作台。

系统深度集成了 W3C 色彩和声理论（Harmony Rules）、W3C WCAG 2.1 无障碍对比度矩阵评估、Brettel 色觉障碍模拟 与 SaaS 组件实时沙盒套色，帮助开发者在打造视觉惊艳界面的同时，确保产品满足国际数字无障碍包容性标准。

---

核心功能特性

1. 智能和声调色板生成引擎

• 支持类似色（Analogous）、单色渐层（Monochromatic）、三元和声（Triadic）、互补色（Complementary）与分裂互补（Split-Complementary）等多种色彩数学规则。

• 支持空格键一键随机生成高饱和灵感配色，支持锁定任意单色卡。

• 提供 HSL 色相、饱和度、明度三轴精细微调滑块。

2. WCAG 2.1 无障碍对比度矩阵 (Contrast Matrix)

• 严格按照相对亮度算法实时计算 $5 \times 5$ 色彩交叉对比度。

• 自动对照 WCAG 2.1 标准标注 AAA (≥7:1)、AA (≥4.5:1)、AA Large (≥3:1) 及 FAIL 等级。

3. 色觉障碍模拟 (Color Blindness Simulation)

• 基于 Brettel 算法模拟红色盲（Protanopia）、绿色盲（Deuteranopia）、蓝色盲（Tritanopia）与全色盲（Achromatopsia）视效，提前排查对比度隐患。

4. 真实 UI 沙盒套色与图片提取

• 实时将当前调色板映射至 SaaS 指标卡片、任务协作流与 CTA 转化组件。

• 支持从本地图片上传中通过 Canvas 采样自动提取调色板。

5. 全格式工程化导出

• 支持一键导出并复制 CSS Variables、Tailwind CSS Config、结构化 JSON 数据及 SVG 矢量色卡。

---

系统架构设计

架构模块说明

• 表现层 (UI/UX)：采用 Tailwind CSS 暗黑质感风格与玻璃拟态效果，提供流畅的动画反馈与自适应布局。

• 和声计算引擎：基于 HSL 色相环数学偏移模型计算精准的色相与饱和度搭配。

• 无障碍核 (A11y Core)：高精度相对亮度与对比度计算流水线，遵循 W3C 规范。

• 色觉模拟层：执行矩阵色彩空间投射，真实还原色觉障碍人群体验。

• 导出桥接层：支持免构建工程化无缝复用。

---

开源仓库与在线体验

• 代码仓库：https://gitcode.com/wdxb/color-palette-pro

• 使用方法：直接在浏览器中打开 index.html 即可开始体验！