npx skills add https://github.com/meodai/skill.color-expert --skill color-expert一个用于色彩相关工作的综合性知识库。详细参考资料请参阅 references/INDEX.md,其中包含 140 多个详细参考文件;此技能文件包含直接回答大多数问题所需的核心知识。
| 任务 | 使用 | 原因 |
|---|---|---|
| 感知色彩操作 | OKLCH | 在明度、彩度和色相方面具有最佳均匀性。解决了 CIELAB 的蓝色问题。 |
| CSS 渐变和调色板 | OKLCH 或 color-mix(in oklab) | 不会像 RGB/HSL 那样在渐变中间变暗 |
| 色域感知的色彩选取 | OKHSL / OKHSV | Ottosson 的选取器空间 — 类似 HSL 的柱状空间,但基于感知 |
| 归一化饱和度 (0-100%) | HSLuv | 基于 CIELUV 彩度,按色相/明度归一化。HPLuv 用于柔和色。 |
| 印刷工作流程 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| ICC 标准光源 |
| 屏幕工作流程 | CIELAB D65 或 OKLAB | D65 = 屏幕标准 |
| 跨媒体外观匹配 | CAM16 / CIECAM02 | 考虑环境、适应、亮度和观察条件 |
| HDR | Jzazbz / ICtCp | 专为扩展动态范围设计 |
| 颜料/油漆混合模拟 | Kubelka-Munk (Spectral.js, Mixbox) | 光谱反射率混合,而非 RGB 平均 |
| 色差 (精确) | CIEDE2000 | 感知距离的黄金标准 |
| 色差 (快速) | 欧几里得距离于 OKLAB | 对大多数应用足够好 |
| 视频/图像压缩 | YCbCr | 亮度+色度分离支持色度二次采样 |
HSL 并非“糟糕” — 它是将 RGB 简单快速地几何重排成一个圆柱体。对于快速色彩选取和基本的 UI 工作来说没问题。但其三个通道并不对应于人类感知:
hsl(60,100%,50%)) 和完全饱和的蓝色 (hsl(240,100%,50%)) 具有相同的 L=50%,但感知亮度差异巨大。L 是数学平均值,而非感知度量。何时 HSL 可用: 简单的色彩选取器、快速的 CSS 调整、感知准确性无关紧要的场景。
何时使用更好的方案:
color-mix(in oklab) (无中间渐变变暗)在程序或 CSS 中使用颜色时,应在原始颜色值和 UI 角色之间添加一个语义层。
以下示例是伪代码,并非字面意义上的 CSS 要求。它们表达了智能体应保留的决策结构,即使目标技术栈使用不同的语法。
在 CSS、JS/TS、Swift、设计令牌 JSON、模板或伪代码中,默认采用相同的结构:
原始颜色字面量通常应仅出现在调色板/引用定义、转换、诊断或刻意的一次性示例中。
ref.red = #f00semantic.warning = ref.red伪代码示例:
ref.red := closest('red', generatedPalette)semantic.warning := ref.redsemantic.onSurface := mostReadableOn(surface)良好模式:调色板/引用令牌定义可用颜色;语义令牌将这些颜色映射到角色,如表面、文本、强调、成功、警告和危险。
如果一个系统可以根据约束推导出决策,则编码该推导过程。例如:生成调色板中最接近的命名色相、通过 APCA/WCAG 目标选择的前景色、在 OKLCH 中根据基础令牌计算出的悬停状态,而不是手动选取第二个无关的十六进制值。
对于较大的系统,优先使用令牌图而非扁平的令牌转储:引用、语义角色、派生函数和作用域继承。这使得主题变更、无障碍保证和多平台导出可审计且更易于维护。
在约 281 万亿个十六进制颜色对中(由 @mrmrs_ 研究,通过 Rust 暴力计算得出):
| 阈值 | 通过百分比 | 几率 |
|---|---|---|
| WCAG 3:1 (大文本) | 26.49% | 约 1/4 |
| WCAG 4.5:1 (AA 正文文本) | 11.98% | 约 1/8 |
| WCAG 7:1 (AAA) | 3.64% | 约 1/27 |
| APCA 60 | 7.33% | 约 1/14 |
| APCA 75 (流畅阅读) | 1.57% | 约 1/64 |
| APCA 90 (推荐正文) | 0.08% | 约 1/1250 |
在可读性相当的情况下,APCA 比 WCAG 严格得多。在 APCA 90 下,281 万亿对中只有 2390 亿对有效。JPEG 压缩利用了相同的生物学原理:色度二次采样(减少 4 倍的颜色数据)是不可见的,因为人类视觉对亮度的分辨率高于对颜色的分辨率。
互补色、三色、四色间隔本身是情绪、可读性或无障碍性的弱预测指标。每个色相平面在感知空间中都有不同的形状,因此几何色相间隔并不能保证感知平衡。
按特性(浅淡/柔和/深邃/鲜艳/暗沉)而非色相组织。研究发现:色相通常比彩度和明度更弱地预测情感反应 — 一个柔和的调色板在许多色相下通常被解读为平静。放松与紧张更多地由彩度 + 明度驱动,而非单独的色相。
灰度是检查明度分离的快速方法,而非无障碍性证明。您仍然需要使用 WCAG/APCA 验证对比度,并考虑文本大小、字重、极性和色觉缺陷。相同特性 + 变化的明度通常更具可读性。无论色相如何,相同的明度通常难以辨认。
60% 主导色,30% 次要色,10% 强调色。一种颜色占主导地位,以防止“三只同等大小的猩猩打架”。
| 系统 | 语境 | 示例 |
|---|---|---|
| ISCC-NBS | 科学精确性 | "鲜艳的黄绿色" |
| Munsell | 系统性符号 | "5GY 7/10" |
| XKCD | 普遍感知 | "难看的黄色", "医院绿" |
| 传统日语 | 文化/诗意 | "wasurenagusa-iro" (勿忘我色) |
| RAL | 工业可重复性 | RAL 5002 |
| Ridgway (1912) | 鸟类学 | 1,115 种命名颜色,公共领域 |
| CSS 命名颜色 | 网络标准 | 147 种命名颜色 |
| color-description lib | 情感形容词 | "浅淡、精致、闪亮" |
使用 color-name-lists npm 包,一次导入 18 个命名系统。
注意:coolors.co 不生成调色板 — 它从其 JS 包中硬编码的 7,821 个预制调色板中随机选取。
<poline-palette> Web 组件用于交互控制color(t) = a + b*cos(2π(c*t+d)), 12 个浮点数 = 无限调色板ImageData 提取 JS 调色板 + Python/TensorFlow 感知调色板嵌入,用于按颜色搜索 (Google Arts & Culture, Apache 2.0)详细文件请参阅 references/INDEX.md,按以下方式组织:
historical/ — Ostwald, Helmholtz, Bezold, Ridgway 1912, ISCC-NBS, Munsell, Albers, Caravaggio 的颜料, Moses Harris, Lewis/Ladd-Franklincontemporary/ — Ottosson 的 OKLAB 文章, Briggs 讲座, Fairchild, Hunt, CIECAM02, MacAdam 椭圆, Pointer 色域, CIE 1931/标准观察者, Pixar 色彩科学, Acerola, Juxtopposed, Computerphile, 鸟类四色视觉, OLO, GenColor 论文。完整抓取:huevaluechroma.com 和 colorandcontrast.comtechniques/ — 上述所有工具的详细文档,外加:CSS Color 4/5, ICC 工作流程, Tyler Hobbs 生成色彩, Harvey Rayner Fontana 方法, Goethe 边缘色彩作为设计技巧, mattdesl workshop + K-M simplex, CSS 原生生成, IQ 余弦预设, Erika Mulvenna 访谈, Bruce Lindbloom 数学参考, 图像提取工具, Aladdin 色彩分析每周安装量
84
代码仓库
GitHub Stars
228
首次出现
3 天前
安全审计
安装于
codex81
opencode80
cursor80
gemini-cli79
amp79
cline79
A comprehensive knowledge base for color-related work. See references/INDEX.md for 140+ detailed reference files; this skill file contains the essential knowledge to answer most questions directly.
| Task | Use | Why |
|---|---|---|
| Perceptual color manipulation | OKLCH | Best uniformity for lightness, chroma, hue. Fixes CIELAB's blue problem. |
| CSS gradients & palettes | OKLCH or color-mix(in oklab) | No mid-gradient darkening like RGB/HSL |
| Gamut-aware color picking | OKHSL / OKHSV | Ottosson's picker spaces — cylindrical like HSL but perceptually grounded |
| Normalized saturation (0-100%) | HSLuv | CIELUV chroma normalized per hue/lightness. HPLuv for pastels. |
| Print workflows | CIELAB D50 | ICC standard illuminant |
| Screen workflows | CIELAB D65 or OKLAB | D65 = screen standard |
| Cross-media appearance matching | CAM16 / CIECAM02 | Accounts for surround, adaptation, luminance, and viewing conditions |
| HDR | Jzazbz / ICtCp | Designed for extended dynamic range |
| Pigment/paint mixing simulation | Kubelka-Munk (Spectral.js, Mixbox) | Spectral reflectance mixing, not RGB averaging |
| Color difference (precision) | CIEDE2000 | Gold standard perceptual distance |
| Color difference (fast) | Euclidean in OKLAB | Good enough for most applications |
| Video/image compression | YCbCr | Luma+chroma separation enables chroma subsampling |
HSL isn't "bad" — it's a simple, fast geometric rearrangement of RGB into a cylinder. It's fine for quick color picking and basic UI work. But its three channels don't correspond to human perception:
hsl(60,100%,50%)) and fully saturated blue (hsl(240,100%,50%)) have the same L=50% but vastly different perceived brightness. L is a mathematical average, not a perceptual measurement.When HSL is fine: simple color pickers, quick CSS tweaks, situations where perceptual accuracy doesn't matter.
When to use something better:
color-mix(in oklab) (no mid-gradient darkening)When using colors in a program or CSS, add a semantic layer between raw color values and UI roles.
The examples below are pseudocode, not literal CSS requirements. They express the decision structure an agent should preserve even if the target stack uses different syntax.
Across CSS, JS/TS, Swift, design-token JSON, templates, or pseudocode, default to the same structure:
Raw color literals should usually appear only in palette/reference definitions, conversions, diagnostics, or deliberately one-off examples.
ref.red = #f00semantic.warning = ref.redPseudocode examples:
ref.red := closest('red', generatedPalette)semantic.warning := ref.redsemantic.onSurface := mostReadableOn(surface)Good pattern: palette/reference tokens define available colors; semantic tokens map those colors to roles like surface, text, accent, success, warning, and danger.
If a system can derive a decision from constraints, encode that derivation. Examples: nearest named hue in a generated palette, foreground chosen by APCA/WCAG target, hover state computed from the base token in OKLCH instead of hand-picking a second unrelated hex.
For larger systems, prefer a token graph over a flat token dump: references, semantic roles, derived functions, and scope inheritance. This makes theme changes, accessibility guarantees, and multi-platform export auditable and easier to maintain.
Of ~281 trillion hex color pairs (research by @mrmrs_, computed via a Rust brute-force run):
| Threshold | % passing | Odds |
|---|---|---|
| WCAG 3:1 (large text) | 26.49% | ~1 in 4 |
| WCAG 4.5:1 (AA body text) | 11.98% | ~1 in 8 |
| WCAG 7:1 (AAA) | 3.64% | ~1 in 27 |
| APCA 60 | 7.33% | ~1 in 14 |
| APCA 75 (fluent reading) | 1.57% | ~1 in 64 |
| APCA 90 (preferred body) | 0.08% | ~1 in 1,250 |
APCA is far more restrictive than WCAG at comparable readability. At APCA 90, only 239 billion of 281 trillion pairs work. JPEG compression exploits the same biology: chroma subsampling (4× less color data) is invisible because human vision resolves brightness at higher resolution than color.
Complementary, triadic, tetradic intervals are weak predictors of mood, legibility, or accessibility on their own. Every hue plane has a different shape in perceptual space, so geometric hue intervals do not guarantee perceptual balance.
Organize by character (pale/muted/deep/vivid/dark), not hue. Finding: hue is usually a weaker predictor of emotional response than chroma and lightness — a muted palette often reads as calm across many hues. Relaxed vs intense is driven more by chroma + lightness than hue alone.
Grayscale is a quick sanity check for lightness separation, not an accessibility proof. You still need to verify contrast with WCAG/APCA and consider text size, weight, polarity, and CVD. Same character + varied lightness is often more readable. Same lightness regardless of hue is usually illegible.
60% dominant color, 30% secondary, 10% accent. One color dominates to prevent "three equally-sized gorillas fighting."
| System | Register | Example |
|---|---|---|
| ISCC-NBS | Scientific precision | "vivid yellowish green" |
| Munsell | Systematic notation | "5GY 7/10" |
| XKCD | Common perception | "ugly yellow", "hospital green" |
| Traditional Japanese | Cultural/poetic | "wasurenagusa-iro" (forget-me-not) |
| RAL | Industrial reproducibility | RAL 5002 |
| Ridgway (1912) | Ornithological | 1,115 named colors, public domain |
| CSS Named Colors | Web standard | 147 named colors |
| color-description lib | Emotional adjectives | "pale, delicate, glistening" |
Use color-name-lists npm package for 18 naming systems in one import.
Note: coolors.co does not generate palettes — it picks randomly from 7,821 pre-made palettes hardcoded in its JS bundle.
<poline-palette> web component for interactive controlscolor(t) = a + b*cos(2π(c*t+d)), 12 floats = infinite paletteImageData + Python/TensorFlow perceptual palette embeddings for search-by-color (Google Arts & Culture, Apache 2.0)See references/INDEX.md for the detailed files organized as:
historical/ — Ostwald, Helmholtz, Bezold, Ridgway 1912, ISCC-NBS, Munsell, Albers, Caravaggio's pigments, Moses Harris, Lewis/Ladd-Franklincontemporary/ — Ottosson's OKLAB articles, Briggs lectures, Fairchild, Hunt, CIECAM02, MacAdam ellipses, Pointer's gamut, CIE 1931/standard observer, Pixar Color Science, Acerola, Juxtopposed, Computerphile, bird tetrachromacy, OLO, GenColor paper. Full scrapes: huevaluechroma.com and colorandcontrast.comtechniques/ — All tools above documented in detail, plus: CSS Color 4/5, ICC workflows, Tyler Hobbs generative color, Harvey Rayner Fontana approach, Goethe edge colors as design hack, mattdesl workshop + K-M simplex, CSS-native generation, IQ cosine presets, Erika Mulvenna interview, Bruce Lindbloom math reference, image extraction tools, Aladdin color analysisWeekly Installs
84
Repository
GitHub Stars
228
First Seen
3 days ago
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
codex81
opencode80
cursor80
gemini-cli79
amp79
cline79
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
120,000 周安装
免费AI数据抓取智能体:自动化收集、丰富与存储网站/API数据
1,100 周安装
GraphQL 操作最佳实践指南:查询、变更、订阅编写与优化技巧
1,100 周安装
AntV 图表可视化技能 - 智能图表选择与数据可视化生成工具
1,200 周安装
Scrapling官方网络爬虫框架 - 自适应解析、绕过Cloudflare、Python爬虫库
1,100 周安装
Theme Factory - 专业字体色彩主题库,一键应用设计风格到演示文稿和作品
1,200 周安装
Base44 CLI 工具 - 创建和管理 Base44 应用项目 | 命令行开发工具
1,100 周安装