AI Skills
better-colors

better-colors

热门

OKLCH色彩空间及Web项目中的颜色使用。将hex/rgb/hsl转换为oklch，生成调色板，检查对比度，处理色域边界，使用Tailwind v4进行主题设计，并有意义地应用颜色。触发条件：oklch、颜色转换、调色板生成、对比度比率、色域、display p3、设计令牌、语义颜色令牌、色调漂移、色度、深色模式颜色、强调色、颜色含义、浅色和深色外观、增强对比度。

1291Star
32Fork
更新于 2026/7/28
获取 Skill源代码

相关 Skills

frontend-code-review15万migrate-radix-to-base12万shadcn12万
SKILL.md
只读
名称
better-colors
描述

OKLCH色彩空间及Web项目中的颜色使用。将hex/rgb/hsl转换为oklch，生成调色板，检查对比度，处理色域边界，使用Tailwind v4进行主题设计，并有意义地应用颜色。触发条件：oklch、颜色转换、调色板生成、对比度比率、色域、display p3、设计令牌、语义颜色令牌、色调漂移、色度、深色模式颜色、强调色、颜色含义、浅色和深色外观、增强对比度。

OKLCH颜色

OKLCH是一种感知均匀的色彩空间，其中明度、色度和色调是有用的设计控制。当项目已使用OKLCH、创建新颜色系统或用户要求转换或调色板工作时使用它。否则保留项目已有的令牌和表示法：一致的hex或RGB令牌系统比针对孤立修复引入第二种颜色表示更好。要交互式探索，请访问oklch.fyi。

快速参考

类别 使用时机 参考
转换 Hex/rgb/hsl转oklch color-conversion.md
调色板 生成色阶、多色调、深色模式 palette-generation.md
对比度 APCA/WCAG检查、报告失败、按要求修复 accessibility-contrast.md
色域与Tailwind P3回退、@theme色阶、色域裁剪 gamut-and-tailwind.md
使用 语义令牌、每种颜色一个含义、主要操作强调、外观变体 color-usage.md

核心原则

1. 使用感知色彩空间

  • 尊重现有系统。 不要仅仅因为加载了此技能就转换表示法。除非任务包含颜色系统迁移，否则重用项目的语义令牌和编写格式。
  • 感知均匀性。 相等的L步长=相等的亮度。oklch(0.5 ...)在视觉上是中间值。HSL的lightness: 50%随色调变化很大。
  • 稳定的色调。 HSL蓝色在明度变化时会向紫色偏移。OKLCH色调在整个明度范围内保持不变。
  • 独立的色度。 色度是色彩鲜艳度的绝对度量，不依赖于明度。HSL饱和度则不然。
  • 有限色域。 并非每个oklch值都能映射到可显示的sRGB颜色。某些色调的高色度值会被裁剪；需要色域意识。

2. 一致地编写和格式化OKLCH

oklch(L C H)
oklch(L C H / alpha)
通道 范围 描述
L（明度） 0–1 0 = 黑色，1 = 白色。感知均匀。
C（色度） 0–~0.4 色彩鲜艳度。0 = 灰色。最大值取决于L和H。
H（色调） 0–360 色调角度，以度为单位。
alpha 0–1 可选透明度。斜杠语法。 
oklch(0.637 0.237 25.331)
oklch(0.8 0.05 200 / 0.5)

L和C使用三位小数，H最多三位。去掉尾随零，并将-0格式化为0。OKLCH是Baseline 2023；当支持要求异常广泛时，检查目标项目的浏览器矩阵，而不是依赖固定的全局覆盖率百分比。

3. 测量对比度、色域和调色板行为

规则 值
浅色/深色边界 L > 0.73 = 浅色背景 → 深色文字；低于此值，浅色文字得分仍更高
明度差距（浅色背景） 背景L > 0.9时，前景L < 0.35
明度差距（深色背景） 背景L < 0.25时，前景L > 0.9
色调漂移阈值 调色板步骤间色调变化 > 10° = 可见漂移
APCA正文文本 |Lc| >= 75最低，>= 90首选
APCA非正文文本 |Lc| >= 60最低
WCAG 2正常文本 4.5:1 AA，7:1 AAA
对比度修复（仅当被要求时） 先调整L；尽可能保留C和H，然后重新测量渲染对

常见错误

问题 修复
原始颜色绕过项目的语义令牌系统 在项目现有表示法中重用或添加正确的角色令牌
在hex/RGB代码库中引入孤立的OKLCH值 保留现有表示法，除非任务包含颜色系统迁移
带有色调漂移的HSL调色板渐变 使用恒定oklch色调重建
对比度失败（使用APCA检查前景与其背景） 报告该对、测量的Lc及其未达到的阈值；仅在要求时更改颜色（然后调整L，保持C和H）
高色度未检查色域 裁剪到sRGB中L/H的最大色度
不同色调使用相同的绝对C 使用相同的C%（最大值的百分比）以获得一致的鲜艳度
P3颜色没有sRGB回退 添加@media (color-gamut: p3)模式
通过机械反转浅色调色板创建深色模式 以浅色调色板为起点，然后调整色度和明度，并重新检查每个前景/背景对
Tailwind v4 @theme中的Hex 转换为oklch值
使用逗号语法的Alpha 使用斜杠：oklch(L C H / alpha)
相同色调表示两种不同含义（链接颜色被装饰性重用） 一种颜色，一种含义；为第二种用途赋予中性色
语义令牌在其角色之外使用（分隔符作为文本） 为缺失的角色添加令牌；切勿按值借用
一个视图中多个彩色控件背景 仅填充单个主要操作；次要操作保持中性
仅在浅色模式下验证调色板 在两种外观下重新检查每个前景/背景对

审查输出格式

仅当用户要求独立颜色审查时使用此格式。当better-interface协调审查时，向该技能提供领域证据和发现，并让其输出格式、严重性等级、合并规则、上限和结论优先。

独立审查分为两部分呈现。

发现

按原则分组所有确认的发现。使用包含严重性、位置、之前、之后和原因列的Markdown表格。切勿使用单独的“之前：”/“之后：”行。

  • 严重性：HIGH使内容不可读或分配了误导性的语义颜色；MEDIUM造成明显的主题、色域或一致性问题；LOW是孤立的打磨。
  • 位置：引用path/to/file:line。如果工件没有源文件，则引用确切的屏幕和组件。
  • 之前/之后：显示当前值或令牌以及确切的替换。
  • 原因：指出违反的原则，并在相关时包括测量的对比度或色域证据。

将重复的系统性问题合并为一行，并列出所有受影响的位置。省略没有发现的原理。

严重性 位置 之前 之后 原因
MEDIUM src/theme.css:18 color: #3b82f6 color: oklch(0.623 0.188 259.815) 新项目颜色使用OKLCH令牌
MEDIUM src/palette.ts:31 不同色调使用相同的绝对C 每个色调最大色度的相同C% 相等的色度值在不同色调下看起来并不同样鲜艳
HIGH src/theme.css:52 P3颜色无回退 在@media (color-gamut: p3)之前添加sRGB回退 该颜色在非P3显示器上失败

验证与结论

在发现之后：

  1. 验证：列出运行的确切检查及其观察结果，包括对比度测量、色域检查以及适用时的浅色和深色外观。如果未运行检查，则说明仍需验证的内容。
  2. 结论：如果存在任何HIGH发现，则为Block；如果仅存在MEDIUM或LOW发现，则为Needs changes；仅当没有可操作的发现时，才为Approve。

当没有发现时，省略表格，说明“无可操作的颜色发现”，报告验证，并以Approve结束。