algorithmic-color-palette

Name: algorithmic-color-palette
Author: dembrandt

github.com/dembrandt设计与 UI174903 次安装1 周前更新

代码仓库

关于 algorithmic-color-palette

面向产品设计师和前端开发者的配色指南，说明如何从品牌色推导交互状态色、品牌中性色和语义色，并为颜色指定界面角色。

主要功能

01从品牌色推导悬停与激活变体
02生成带品牌色调的灰阶
03按视觉权重协调语义状态色
04定义焦点、选择和禁用状态颜色
05为色彩令牌指定界面角色

适用场景

01将少量品牌色扩展为界面调色板
02为按钮和控件设定交互状态色
03建立一致的状态与中性色体系
04检查颜色令牌的角色和可访问性

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dembrandt/dembrandt-skills --skill algorithmic-color-palette

安装后在 Claude Code 中输入/algorithmic-color-palette确认已加载。

详细介绍

算法生成的颜色调色板

仅有 2–3 种颜色的品牌调色板不足以用于 UI。你还需要用于状态（悬停、激活、禁用）的色阶、用于背景和边框的中性色，以及用于状态指示的语义色。根据品牌色通过算法生成这些颜色，能让整个调色板保持协调——所有颜色都与品牌视觉相关，而不是取自通用灰色或现成的颜色库。

不要猜测种子颜色——提取它们（可选使用 dembrandt engine）。 如果品牌已存在于网络上，请从其线上网站提取真实调色板，而不是凭感觉估计十六进制值：get_color_palette（或 extract-design 技能）会从 DOM 中返回实际计算出的品牌色和中性色，然后你可以用下面的方法扩展它们。设置说明请参阅 extract-design。

推导交互状态颜色

为每种品牌色至少生成三种变体：基础色、较深色（悬停／激活）和较浅色（着色／背景）。

方法：调整 HSL

base:    hsl(H, S%, L%)
hover:   hsl(H, S%, L% - 8%)     ← darken by reducing lightness
active:  hsl(H, S%, L% - 14%)    ← darken further
tint:    hsl(H, S%, L% + 40%)    ← lighten significantly for backgrounds
subtle:  hsl(H, S% * 0.3, L% + 45%)  ← heavily desaturated, near-white

示例：品牌主色 `#133174`（hsl 224, 70%, 27%）

--color-primary-subtle:  hsl(224, 21%, 94%);  /* background tint */
--color-primary-tint:    hsl(224, 70%, 67%);  /* light variant */
--color-primary:         hsl(224, 70%, 27%);  /* base */
--color-primary-hover:   hsl(224, 70%, 19%);  /* hover: -8% lightness */
--color-primary-active:  hsl(224, 70%, 13%);  /* active: -14% lightness */

示例：从青绿色品牌色推导成功绿

如果品牌色中包含绿色或青绿色，可将其向更清晰的成功绿偏移：

--color-success-subtle:  hsl(142, 20%, 94%);
--color-success:         hsl(142, 60%, 35%);
--color-success-hover:   hsl(142, 60%, 27%);

推导品牌着色的灰色

通用灰色（#666、#999、#eee）会让人觉得与品牌脱节。降低品牌色相的饱和度，可以生成带有细微色调的灰色——根据品牌呈现暖色、冷色或中性色——让它们看起来属于同一个调色板。

视觉舒适度：避免白底纯黑

纯白 #FFFFFF 上的纯黑 #000000 会导致光晕效应和眼睛疲劳。文字应使用 #222222（grey-900）等近黑色，背景应使用 #EEEEEE（grey-50）等灰白色；这组柔和的配色仍符合 WCAG AA/AAA 标准，视觉上也不那么刺眼。

发布角色，而不只是色样

带十六进制值的命名色块还不能构成系统，每种颜色都必须有明确角色：表面、表面色调、文字、链接、强调色、装饰色。也要为那些不起眼的角色命名，例如卡片后面的灰白色、条纹和细分隔线。角色未命名，就会由框架默认值填补，这正是偏离品牌的中性色占据大部分像素的原因。如果两个团队为同一个缺失色调设定了不同值，说明缺失的是角色，而不是颜色。

方法：降低饱和度 + 调整亮度

brand hue H
grey-900: hsl(H, 12%, 10%)   ← near-black, text
grey-700: hsl(H, 10%, 30%)   ← dark text, icons
grey-500: hsl(H,  8%, 50%)   ← secondary text, placeholders
grey-300: hsl(H,  6%, 70%)   ← disabled text, subtle labels
grey-200: hsl(H,  5%, 82%)   ← borders, dividers
grey-100: hsl(H,  4%, 92%)   ← input backgrounds, table stripes
grey-50:  hsl(H,  3%, 96%)   ← page background, subtle fills

示例：品牌主色 `#133174`（H = 224，带蓝色调）

--color-grey-900: hsl(224, 12%, 10%);  /* #16171f — slightly blue-black */
--color-grey-500: hsl(224,  8%, 50%);  /* #7b7e8a — cool grey */
--color-grey-200: hsl(224,  5%, 82%);  /* #cfd0d5 — cool light border */
--color-grey-50:  hsl(224,  3%, 96%);  /* #f4f4f6 — near-white with a hint of blue */

与通用的 #f5f5f5（无色相）相比，品牌着色版本略有不同，但看起来更有意图。

推导语义色

状态色（错误、警告、成功、信息）应与品牌协调。要实现一致性，应统一它们的 饱和度 和亮度，使整组状态色具有一致的“视觉重量”。

方法：统一视觉重量

**选择色相：**使用标准语义色相（错误为 0，警告为 38，成功为 142）。
**统一 S 和 L：**以品牌主色的饱和度和亮度为起点。
**调整感知亮度：**黄色／橙色（警告）等色相看起来比蓝色／红色更明亮。将警告色的亮度比成功色或错误色降低 5–10%，确保它们在页面上具有相同的“重量”。

语义类型	色相 (H)	饱和度 (S)	亮度 (L)
错误	0–10	与主色相同	与主色相同
警告	35–45	与主色相同	主色 L - 10%
成功	140–160	与主色相同	与主色相同
信息	210–230	与主色相同	与主色相同

**“鲜艳度”规则：**如果品牌色较柔和（饱和度低），语义色也应稍显柔和。如果品牌色是霓虹色／鲜艳色，语义色也应与之相称。共享强度，才能实现协调。

功能色与交互色

标准 UI 元素除了基础品牌色和语义色，还需要专用的功能性令牌。

焦点状态

焦点指示器对无障碍访问至关重要。请使用在所有背景上都清晰可见的颜色。

默认： 品牌主色（前提是对比度足够高）。
备用： 专用的高对比度蓝色 hsl(215, 95%, 50%)。
令牌： --color-focus。

选中和高亮

文本选中和列表项高亮应当柔和、不喧宾夺主。

方法： 使用主色相，亮度非常高（90% 以上），饱和度适中。
令牌： --color-selection。

遮罩和模态框

模态框或抽屉的背景遮罩需要使用中性半透明颜色。

方法： 使用 grey-900 色相并添加 alpha 通道。
令牌： --color-overlay: hsla(H, 12%, 10%, 0.5);

骨架屏和加载状态

加载状态应保持中性、不显眼。

方法： 使用 grey-200 作为底色，使用 grey-100 作为闪光高亮色。
令牌： --color-skeleton。

禁用状态

禁用元素必须明确表示其不可操作。

方法： 文本使用 grey-500，背景和边框使用 grey-200。
规则： 避免在禁用背景中使用品牌色调，以免造成“伪激活”状态的混淆。

品牌色调阴影

高端 UI 会避免使用纯黑阴影。请使用非常深、低饱和度的品牌色相。

方法： hsla(H, 15%, 5%, alpha)，其中 H 为品牌色相。
令牌： --color-shadow-base。

链接

基础： 品牌主色或专用的高可见度蓝色。
已访问： 将主色相向紫色偏移（+20），并降低饱和度。
令牌： --color-link、--color-link-visited。

输入和验证

方法： 在错误和成功状态下，边框与文本使用语义基础色。
非活动边框： grey-200。
活动/焦点边框： 品牌主色。

完整令牌输出示例

:root {
  /* Primary — derived from brand #133174 */
  --color-primary-subtle:  hsl(224, 21%, 94%);
  --color-primary-tint:    hsl(224, 70%, 67%);
  --color-primary:         hsl(224, 70%, 27%);
  --color-primary-hover:   hsl(224, 70%, 19%);
  --color-primary-active:  hsl(224, 70%, 13%);

  /* Brand-tinted neutrals */
  --color-grey-900: hsl(224, 12%, 10%);
  --color-grey-700: hsl(224, 10%, 30%);
  --color-grey-500: hsl(224,  8%, 50%);
  --color-grey-300: hsl(224,  6%, 70%);
  --color-grey-200: hsl(224,  5%, 82%);
  --color-grey-100: hsl(224,  4%, 92%);
  --color-grey-50:  hsl(224,  3%, 96%);

  /* Semantic */
  --color-error:   hsl(4,  72%, 44%);
  --color-warning: hsl(38, 80%, 44%);
  --color-success: hsl(142, 58%, 35%);
  --color-info:    hsl(224, 70%, 27%); /* = primary */

  /* Semantic subtle backgrounds */
  --color-error-subtle:   hsl(4,  50%, 95%);
  --color-warning-subtle: hsl(38, 60%, 95%);
  --color-success-subtle: hsl(142, 40%, 95%);

  /* Functional */
  --color-focus:     var(--color-primary);
  --color-selection: hsl(224, 70%, 90%);
  --color-overlay:   hsla(224, 12%, 10%, 0.5);
  --color-skeleton:  var(--color-grey-200);
  --color-shadow:    hsla(224, 15%, 5%, 0.1);

  /* Links */
  --color-link:         var(--color-primary);
  --color-link-visited: hsl(244, 40%, 35%);
}

审查清单

常见反模式

反模式	问题	修正方法
纯白上的纯黑	视觉疲劳严重，产生“光晕效应”	使用近黑色（#222）和米白色（#EEE）
彩色区域旁的灰色边框	显得廉价且不协调	移除边框，或使用相邻颜色的染色/深色变体
随意挑选的“警告/错误”颜色	调色板显得不协调	从品牌 HSL 派生，并使视觉权重保持一致
通用灰色调色板（#666、#999）	缺乏品牌辨识度	使用低饱和度的品牌色相为中性色调色

支持 Markdown

登录后评论