AI 摘要：Harmonizer 是 Evil Martians 推出的色彩工具，可在 Figma 插件或 Web 界面中使用，利用 OKLCH 与 APCA 生成具一致亮度与对比度的配色方案。该工具通过定义光度等级、色相与背景上下文，自动生成可在浅色与深色模式中保持视觉一致的色彩体系。支持导出多种开发格式（Tailwind、CSS 变量、JSON）

1. 工具介绍与设计初衷
• Harmonizer 旨在解决现有设计系统中颜色等级不一致、对比度难以统一、浅色/深色模式映射不对称等问题。
• 利用感知一致的亮度（lightness）与对比（contrast），确保 UI 元素间的视觉可靠性与可访问性。

2. 工作原理
• 继承 Figma 文档的色域设置（P3 或 sRGB）。
• 用户可定义色阶（如 100–900）及相应光度步进。
• 支持设定对比度计算方向（前景/背景）及背景上下文（白、黑或自定义）。
• 一键生成 Palette，自动产生色彩预览与变量。

3. 核心特性
• 可调色彩配置文件（P3 或 sRGB）。
• 基于 OKLCH 实现感知一致的色度 (chroma)。
• 使用 APCA 或 WCAG 对比计算公式，提升屏幕可读性。
• 支持自定义背景颜色、自动识别现有调色板、自动更新样式变量。
• 提供可共享的设定文件（Config）与开发导出（Tailwind、CSS、JSON）。

4. 技术背景与实现细节
• 使用 PNPM 管理 monorepo，包含 core、web、figma-plugin 三个子包。
• 主要命令包括安装依赖、构建、预览、格式化及类型检查。
• 借助 Spred 响应式库与 React 实现状态管理。
• 色彩计算逻辑在 Web Worker 中执行，避免阻塞主线程。
• 通过 CSS 变量动态控制外观，实现全局响应式配色。

5. 设计理论与算法基础
• OKLCH：提供感知上平衡的亮度与色度模型。
• APCA：面向自发光显示器的现代对比度算法。
• APCACH：自定义计算器，将上述两种算法融合以生成高度可访问的色彩。

GitHub

GitHub - evilmartians/harmonizer

Contribute to evilmartians/harmonizer development by creating an account on GitHub.