Lightness 按 50–950 逐级分配，每一级更容易辨认。
Skills · 颜色系统
来源信息
Jakub Krehel2026-08-27
简介
Jakub Krehel 制作的 Agent Skill，面向 Web 项目里的 OKLCH 颜色工作。调用后可以按当前任务选择：转换 Hex、RGB 或 HSL，生成单色与多色 Palette，检查 APCA 和 WCAG 对比度，处理 sRGB、Display P3 的 gamut 与 fallback，或整理 Tailwind v4 @theme。GoodVibe 在文章和课程里引用它，并补充中文使用场景；源码、安装方式与更新状态仍以原项目为准。
生成后的颜色差异
已生成完整的 11 阶色阶。500 保留为主色锚点；Lightness 向两端展开，每一级都按当前 L 与 Hue 的可用色度比例生成，明暗两端会自然收低。
50
L 95C 0.019100L 90C 0.041200L 82C 0.079300L 73C 0.130400L 67C 0.170500L 62C 0.198600L 55C 0.175700L 48C 0.153800L 39C 0.125900L 31C 0.099950L 23C 0.074Hue 保持在同一个颜色家族，色阶之间不会突然转向。
每一级按当前 L / H 的可用色度比例生成，明暗两端会自然收低。
相关文章
OKLCH：以人为本的色彩空间
基于 OKLCH 生成色阶，更容易组织均匀、符合人眼明暗感受的颜色变化
如何安装
- 1把安装 Prompt 发给当前 Agent，它会按自己的 Skills 目录完成安装；想手动安装时，再在当前项目根目录运行下方命令。
- 2安装完成后调用 /oklch-skill，再按当前任务选择颜色转换、Palette、对比度、gamut 与 Tailwind。
- 3把输出放回真实界面，继续检查文字对比度、视觉层级和不同屏幕上的显示结果。
Skill 安装 Prompt
请帮我安装这个 Skill： https://github.com/jakubkrehel/oklch-skill 安装到当前 Agent 的 Skills 目录，Skill 名保持为 oklch-skill。安装完成后确认 SKILL.md 可以被发现，并告诉我安装位置与调用方式。
安装命令
npx skills add jakubkrehel/oklch-skill如何使用
批量转换现有颜色
/oklch-skill 把以下 Hex、RGB 和 HSL 颜色转换为 OKLCH，保留原值，并用 Before / After 表格输出：<粘贴颜色或 CSS 变量>。
生成 Palette 与暗色模式
/oklch-skill 以当前品牌主色为 500，生成 50–950 色阶和对应的暗色模式映射，并输出 Tailwind v4 @theme 变量。
检查文字对比度
/oklch-skill 检查 <前景色> 在 <背景色> 上的 APCA 和 WCAG 2 对比度；如果未通过，只调整 OKLCH 的 L，并用 Before / After 表格列出修改。
补齐 P3 与 sRGB fallback
/oklch-skill 检查以下 OKLCH 或 Display P3 颜色是否超出 sRGB gamut，生成 clamped sRGB fallback 和 @media (color-gamut: p3) CSS：<粘贴颜色或变量>。
适用场景：转换现有颜色、生成单色或多色 Palette、检查对比度、处理广色域与 fallback、整理 Tailwind v4 主题