SuperAPI AI 工具集

oklch-colors

前端与建站

查看项目

更新于 10-15 22:40

技能介绍

OKLCH Colors 是一个面向 Web 项目的颜色处理技能,核心是使用感知均匀的 OKLCH 颜色空间解决 CSS 中常见的调色板断裂、对比度不达标和色相漂移问题。

用途:将 hex/rgb/hsl 转换为 oklch,生成色阶与多色相调色板,检查 APCA/WCAG 对比度,处理 sRGB 与 P3 色域边界,并在 Tailwind v4 中做主题配置。

主要能力:OKLCH 语法为 oklch(L C H) 或 oklch(L C H / alpha),L 取 0–1,C 约 0–0.4,H 为 0–360 度。技能提供四类参考:color-conversion.md(格式转换)、palette-generation.md(色阶、多色相、暗色模式)、accessibility-contrast.md(APCA/WCAG 阈值与修复)、gamut-and-tailwind.md(P3 回退、@theme 色阶、色域裁剪)。关键阈值包括:L>0.6 视为浅色背景用深色文字;浅底前景 L<0.45、深底前景 L>0.75;色相漂移超过 10° 视为可见;APCA 正文 |Lc|>=60 通过、>=75 为 pass+;WCAG 2 正文 4.5:1 AA、7:1 AAA。修复对比度只调 L,C 影响可忽略。

使用方式:按需查阅对应参考文件;输出颜色变更时用含 Before/After 列的 Markdown 表格,逐行列出所有改动。P3 颜色需加 @media (color-gamut: p3) 回退。

适用场景:Web 前端配色、设计系统色阶、无障碍对比度修复、Tailwind v4 主题迁移。

限制:并非所有 oklch 值都能映射到可显示的 sRGB 颜色,高彩度值可能被裁剪,需做色域检查;浏览器支持为 Baseline 2023、全球覆盖 96%+。资料未提供收费、价格与平台信息。