algorithmic-color-palette

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Algorithmic Colour Palette

算法生成配色方案

A brand palette of 2–3 colours is not enough for a UI. You need shades for states (hover, active, disabled), neutrals for backgrounds and borders, and semantic colours for status. Deriving these algorithmically from the brand colours produces a palette that feels coherent — everything is visually related to the brand rather than pulled from a generic grey or a stock colour library.

Don't guess the seed colours — extract them (dembrandt engine, optional). If the brand already exists on the web, pull its real palette off the live site instead of eyeballing a hex:
get_color_palette
(or the
extract-design
skill) returns the actual computed brand and neutral colours from the DOM, which you then expand with the methods below. See
extract-design
for setup.

仅2-3种颜色的品牌配色不足以支撑UI设计。你需要用于状态（悬停、激活、禁用）的色调、用于背景和边框的中性色，以及用于状态提示的语义色彩。通过算法从品牌色衍生出这些色彩，能生成一套风格协调的配色方案——所有视觉元素都与品牌相关，而非取自通用灰色或现成色彩库。

不要猜测种子色——提取真实色彩（可选使用dembrandt引擎）。如果品牌已在网页上呈现，请从真实网站提取其实际配色，而非凭目测估算十六进制值：
get_color_palette
（或
extract-design
技能）可从DOM中返回实际计算出的品牌色和中性色，之后你可以用下文的方法扩展配色。详见
extract-design
的设置说明。

Deriving Interactive State Colours

衍生交互状态色彩

From each brand colour, generate at minimum three variants: base, darker (hover/active), lighter (tint/background).

从每种品牌色中，至少生成三种变体：基础色、深色（悬停/激活状态）、浅色（淡色/背景色）。

Method: HSL adjustment

方法：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

base:    hsl(H, S%, L%)
hover:   hsl(H, S%, L% - 8%)     ← 通过降低亮度加深颜色
active:  hsl(H, S%, L% - 14%)    ← 进一步加深
tint:    hsl(H, S%, L% + 40%)    ← 大幅提亮作为背景色
subtle:  hsl(H, S% * 0.3, L% + 45%)  ← 高度低饱和，接近白色

Example: brand primary

#133174

(hsl 224, 70%, 27%)

示例：品牌主色

#133174

（hsl 224, 70%, 27%）

css

--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 */

css

--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%);  /* 悬停：亮度降低8% */
--color-primary-active:  hsl(224, 70%, 13%);  /* 激活：亮度降低14% */

Example: success green derived from a teal brand colour

示例：从蓝绿色品牌色衍生成功绿色

If the brand has a green or teal, shift it toward a clearer success green:

css

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

如果品牌色包含绿色或蓝绿色，可将其调整为更清晰的成功绿色：

css

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

Deriving Brand-Tinted Greys

衍生品牌色调灰色

Generic greys (

#666

#999

#eee

) feel disconnected from the brand. Desaturating the brand hue produces greys that are subtly tinted — warm, cool, or neutral depending on the brand — and feel like they belong to the same palette.

通用灰色（

#666

、

#999

、

#eee

）会让人感觉与品牌脱节。对品牌色调进行去饱和处理，可生成带有微妙色调的灰色——根据品牌风格呈现暖调、冷调或中性调，且看起来属于同一配色体系。

Optical Comfort: Avoiding Pure Black on White

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

Extreme contrast (pure black

#000000

on pure white

#FFFFFF

) can cause "halation" and eye strain. To create a more comfortable reading experience:

Use "Near-Black" for text: Use a very dark grey (e.g.,
```
#222222
```
or your
```
grey-900
```
token) instead of pure black.
Use "Off-White" for backgrounds: A slightly muted white (e.g.,
```
#EEEEEE
```
or your
```
grey-50
```
token) is softer on the eyes than pure
```
#FFFFFF
```
.

This "softened contrast" remains highly accessible (passing WCAG AA/AAA) but feels more professional and less harsh.

极端对比度（白底纯黑

#000000

文字）会导致“光晕效应”和视觉疲劳。为打造更舒适的阅读体验：

文本使用“近黑色”：使用极深的灰色（例如
```
#222222
```
或你的
```
grey-900
```
变量）替代纯黑。
背景使用“米白色”：略带灰度的白色（例如
```
#EEEEEE
```
或你的
```
grey-50
```
变量）比纯白
```
#FFFFFF
```
更柔和。

这种“柔和对比度”仍能满足WCAG AA/AAA无障碍标准，但看起来更专业且不刺眼。

Method: desaturate + adjust lightness

方法：去饱和 + 调整亮度

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

品牌色调 H
grey-900: hsl(H, 12%, 10%)   ← 近黑色，用于文本
grey-700: hsl(H, 10%, 30%)   ← 深色文本、图标
grey-500: hsl(H,  8%, 50%)   ← 次要文本、占位符
grey-300: hsl(H,  6%, 70%)   ← 禁用文本、次要标签
grey-200: hsl(H,  5%, 82%)   ← 边框、分隔线
grey-100: hsl(H,  4%, 92%)   ← 输入框背景、表格条纹
grey-50:  hsl(H,  3%, 96%)   ← 页面背景、次要填充

Example: brand primary

#133174

(H = 224, blue-tinted)

示例：品牌主色

#133174

（H = 224，带蓝色调）

css

--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 */

Compare to generic

#f5f5f5

(no hue) — the brand-tinted version is subtly different but feels intentional.

css

--color-grey-900: hsl(224, 12%, 10%);  /* #16171f — 略带蓝调的黑色 */
--color-grey-500: hsl(224,  8%, 50%);  /* #7b7e8a — 冷灰色 */
--color-grey-200: hsl(224,  5%, 82%);  /* #cfd0d5 — 冷调浅色边框 */
--color-grey-50:  hsl(224,  3%, 96%);  /* #f4f4f6 — 略带蓝调的近白色 */

对比通用的

#f5f5f5

（无色调）——品牌色调的灰色虽差异细微，但显得更具设计感。

Semantic Colour Derivation

语义色彩衍生

Status colours (error, warning, success, info) should feel harmonious with the brand. To achieve cohesion, align their Saturation and Lightness to create a consistent "visual weight" across the status set.

状态色彩（错误、警告、成功、信息）应与品牌风格和谐统一。为实现协调性，需对齐它们的饱和度和亮度，使整套状态色彩具有一致的“视觉权重”。

Method: Aligned visual weight

方法：对齐视觉权重

Pick the Hues: Use standard semantic hues (0 for Error, 38 for Warning, 142 for Success).
Align S & L: Use the saturation and lightness of your Brand Primary as a starting point.
Adjust for Perceived Brightness: Hues like Yellow/Orange (Warning) feel brighter than Blue/Red. Reduce the lightness of Warning by 5–10% compared to Success or Error to ensure they feel equally "heavy" on the page.

Semantic	Hue (H)	Saturation (S)	Lightness (L)
Error	0–10	Match Primary	Match Primary
Warning	35–45	Match Primary	Primary L - 10%
Success	140–160	Match Primary	Match Primary
Info	210–230	Match Primary	Match Primary

The "Vibrancy" Rule: If the brand is muted (low saturation), the semantic colours should also be slightly muted. If the brand is neon/vibrant, the semantics should follow suit. Cohesion comes from shared intensity.

选择色调：使用标准语义色调（错误为0，警告为38，成功为142）。
对齐饱和度与亮度：以品牌主色的饱和度和亮度为起点。
调整感知亮度：黄色/橙色（警告）色调比蓝色/红色更显明亮。将警告色的亮度比成功色或错误色降低5-10%，确保它们在页面上的“视觉权重”一致。

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

“活力”规则：如果品牌色调柔和（低饱和度），语义色彩也应略微柔和；如果品牌色调鲜艳（高饱和度），语义色彩也应保持鲜艳。协调性源于一致的色彩强度。

Functional and Interactive Colours

功能与交互色彩

Standard UI elements require dedicated functional tokens beyond basic brand and semantic colours.

标准UI元素需要专用的功能变量，而非仅依赖基础品牌色和语义色彩。

Focus States

焦点状态

Focus indicators are critical for accessibility. Use a high-visibility colour that works on all backgrounds.

Default: Brand Primary (if contrast is high enough).
Fallback: A dedicated high-contrast blue
```
hsl(215, 95%, 50%)
```
.
Token:
```
--color-focus
```
.

焦点指示器对无障碍至关重要。使用在所有背景上都清晰可见的高辨识度色彩。

默认：品牌主色（如果对比度足够高）。
备选：专用高对比度蓝色
```
hsl(215, 95%, 50%)
```
。
变量：
```
--color-focus
```
。

Selection and Highlights

选中与高亮状态

Text selection and list item highlights should be subtle and non-distracting.

Method: Use the primary hue with very high lightness (90%+) and moderate saturation.
Token:
```
--color-selection
```
.

文本选中和列表项高亮应柔和且不分散注意力。

方法：使用主色调，搭配极高的亮度（90%+）和中等饱和度。
变量：
```
--color-selection
```
。

Overlays and Modals

遮罩与模态框

Backdrops for modals or drawers need a neutral, semi-transparent colour.

Method: Use your
```
grey-900
```
hue with an alpha channel.

Token:

--color-overlay: hsla(H, 12%, 10%, 0.5);

模态框或侧边栏的背景遮罩需要中性半透明色彩。

方法：使用你的
```
grey-900
```
色调并添加透明度通道。

变量：

--color-overlay: hsla(H, 12%, 10%, 0.5);

Skeleton and Loading

骨架屏与加载状态

Loading states should be neutral and recessive.

Method: Use
```
grey-200
```
as the base and
```
grey-100
```
as the shimmer highlight.
Token:
```
--color-skeleton
```
.

加载状态应中性且不突兀。

方法：使用
```
grey-200
```
作为基础色，
```
grey-100
```
作为闪烁高亮色。
变量：
```
--color-skeleton
```
。

Disabled States

禁用状态

Disabled elements must communicate unreachability.

Method: Use
```
grey-500
```
for text and
```
grey-200
```
for backgrounds/borders.
Rule: Avoid using brand tints for disabled backgrounds to prevent "pseudo-active" confusion.

禁用元素必须传达不可交互的状态。

方法：文本使用
```
grey-500
```
，背景/边框使用
```
grey-200
```
。
规则：避免使用品牌淡色作为禁用背景，防止与“伪激活”状态混淆。

Brand-Tinted Shadows

品牌色调阴影

Premium UIs avoid pure black shadows. Use a very dark, desaturated brand hue.

Method:
```
hsla(H, 15%, 5%, alpha)
```
where H is the brand hue.
Token:
```
--color-shadow-base
```
.

高端UI设计避免使用纯黑色阴影。使用极深、低饱和的品牌色调。

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

链接

Base: Brand Primary or a dedicated high-visibility blue.
Visited: Shift primary hue toward purple (+20) and reduce saturation.
Token:
```
--color-link
```
,
```
--color-link-visited
```
.

基础：品牌主色或专用高辨识度蓝色。
已访问：将主色调向紫色偏移（+20）并降低饱和度。
变量：
```
--color-link
```
,
```
--color-link-visited
```
。

Input and Validation

输入框与验证状态

Method: Use semantic base colours for borders and text in error/success states.
Inactive Border:
```
grey-200
```
.
Active/Focus Border: Brand Primary.

方法：错误/成功状态的边框和文本使用语义基础色。
未激活边框：
```
grey-200
```
。
激活/焦点边框：品牌主色。

Full Token Output Example

完整变量输出示例

css

: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%);
}

css

:root {
  /* Primary — 从品牌色 #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%);

  /* 品牌色调中性色 */
  --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%);

  /* 语义色彩 */
  --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 */

  /* 语义色彩淡色背景 */
  --color-error-subtle:   hsl(4,  50%, 95%);
  --color-warning-subtle: hsl(38, 60%, 95%);
  --color-success-subtle: hsl(142, 40%, 95%);

  /* 功能色彩 */
  --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);

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

Review Checklist

审核清单

Are hover and active colours derived from the base by lightness adjustment, not chosen independently?
Are neutral greys tinted with the brand hue rather than using generic
```
#666
```
/
```
#eee
```
?
Is saturation reduced progressively as lightness increases in the grey scale?
Is pure black (#000000) on pure white (#FFFFFF) avoided in favor of near-blacks (e.g., #222) and off-whites (e.g., #EEE)?
Are status colours (Success, Warning, Error) visually weighted to match the brand primary?
If the brand primary is orange or amber, is warning colour clearly distinct from it?
Does each brand colour have at minimum: subtle, base, hover, active variants?
Are semantic colours aligned in Saturation and Lightness to create a cohesive visual weight?
Is there a dedicated
```
--color-focus
```
token that meets accessibility contrast requirements?
Are selection, overlay, and shadow colours derived from the brand hue rather than generic black/grey?
Are disabled states neutral (greys) to avoid confusion with interactive brand colours?
Does the link colour have a distinct
```
visited
```
state derived algorithmically?

悬停和激活色彩是否通过调整亮度从基础色衍生，而非独立选择？
中性灰色是否带有品牌色调，而非使用通用的
```
#666
```
/
```
#eee
```
？
灰色系中，亮度提升时饱和度是否逐步降低？
是否避免使用白底纯黑（#000000）文字，改用近黑色（如#222）和米白色（如#EEE）？
状态色彩（成功、警告、错误）的视觉权重是否与品牌主色匹配？
如果品牌主色是橙色或琥珀色，警告色是否与主色清晰区分？
每种品牌色是否至少包含：淡色、基础色、悬停色、激活色变体？
语义色彩是否对齐饱和度和亮度，以实现协调的视觉权重？
是否有专用的
```
--color-focus
```
变量，且满足无障碍对比度要求？
选中、遮罩和阴影色彩是否从品牌色调衍生，而非使用通用黑/灰色？
禁用状态是否使用中性灰色，避免与交互品牌色混淆？
链接色彩是否有通过算法衍生的独特“已访问”状态？

Common Anti-Patterns

常见反模式

Anti-pattern	Problem	Fix
Pure black on pure white	High visual strain, "halation"	Use near-black (#222) and off-white (#EEE)
Grey borders next to colourful areas	Looks cheap and disconnected	Remove border or use a tinted/darker version of the adjacent colour
Randomly picked "Warning/Error" colours	Palette feels uncoordinated	Derive from brand HSL with visual weight alignment
Generic grey palette (#666, #999)	Lacks brand identity	Tint neutrals with a low-saturation version of the brand hue

反模式	问题	修复方案
白底纯黑文字	视觉疲劳，产生“光晕效应”	使用近黑色（#222）和米白色（#EEE）
彩色区域旁使用灰色边框	显得廉价且与品牌脱节	移除边框，或使用相邻色彩的淡色/深色变体
随机选择“警告/错误”色彩	配色方案不协调	从品牌HSL值衍生，并对齐视觉权重
通用灰色调色板（#666、#999）	缺乏品牌辨识度	使用低饱和度品牌色调生成中性灰色