SuperAPI AI 工具集

better-colors

设计与创作

查看项目

更新于 10-16 06:21

技能介绍

用途:在 Web 项目中采用 OKLCH 感知均匀色彩空间进行颜色转换、调色板生成、对比度检查与主题设计。适用于项目已使用 OKLCH、新建色彩系统,或用户明确要求转换与配色;否则应保留项目既有的令牌与记法,避免为孤立修复引入第二套颜色表示。

主要能力:hex/rgb/hsl 与 oklch 互转;生成色阶、多色相与暗色模式调色板;APCA 与 WCAG 对比度检查、报告失败项并按需修复;色域边界处理、P3 回退与 Tailwind @theme 色阶;语义令牌与颜色用法规范。

写法:oklch(L C H) 或 oklch(L C H / alpha)。L 取 0–1,C 约 0–0.4,H 为 0–360 度,alpha 用斜杠语法。L、C 保留三位小数,H 最多三位,去掉末尾零,-0 写作 0。OKLCH 为 Baseline 2023,若浏览器支持要求特殊,应查目标项目矩阵。

关键规则:L>0.73 视为浅色背景用深色文字;浅底前景 L<0.35、深底前景 L>0.9;色阶色相漂移超过 10° 视为可见漂移;APCA 正文 |Lc|≥75(优选≥90),非正文≥60;WCAG 2 正文 4.5:1 AA、7:1 AAA。修复对比度时优先调 L,尽量保留 C 与 H,并重新测量。

常见错误:原始颜色绕过语义令牌;在 hex/RGB 代码库中孤立引入 OKLCH;HSL 色阶出现色相漂移;高彩度未做色域检查;不同色相使用相同绝对 C(应使用相同 C%);P3 颜色缺少 sRGB 回退;机械反转浅色板生成暗色模式;Tailwind v4 @theme 中写 hex;alpha 用逗号语法;同一色相承担两种含义;语义令牌越权使用;一屏多个彩色控件背景;仅在浅色模式验证调色板。

审查输出:仅在用户要求独立颜色审查时使用。发现项按原则分组,用表格列出 Severity、Location、Before、After、Why;HIGH 表示内容不可读或语义色误导,MEDIUM 表示主题、色域或一致性明显失败,LOW 为局部打磨。重复的系统性问题合并为一行并列出所有位置。之后给出验证(已运行的检查与结果,未运行的说明待验证)与结论:存在 HIGH 则 Block,仅 MEDIUM/LOW 则 Needs changes,无待处理项则 Approve。无发现时省略表格,说明“No actionable color findings”,报告验证并以 Approve 结束。

限制:资料未提供具体安装命令、收费、价格、平台与效果数据;交互探索可访问 oklch.fyi。