调色板生成器：为 UI 设计构建和谐配色方案

为什么调色板在 UI 设计中至关重要

一个精心选择的调色板同时完成三件事：建立视觉层次（引导视线关注重要内容）、传达个性和品牌、满足可访问性标准，使界面适用于所有人，包括色觉缺陷用户。

凭感觉选择颜色——在拾色器中点击直到看起来不错——很少能产生在所有维度上都有效的调色板。色彩理论提供了一种系统方法：从一个锚点颜色开始，利用色轮上的几何关系推导出其余颜色。

色彩理论基础

色轮

现代色轮根据感知关系将色相排列成一个圆。相邻的颜色感觉和谐；相对的颜色产生对比。色轮是每种色彩和谐系统的基础。

色相、饱和度和明度（HSL）

HSL 在设计工作中比 RGB 更直观：

• 色相（Hue）：在色轮上的位置，0–360°
• 饱和度（Saturation）：强度，0%（灰色）到 100%（鲜艳）
• 明度（Lightness）：亮度，0%（黑色）到 100%（白色）

要创建色调（更浅版本），增加明度。要创建暗调（更深版本），降低明度。要降低饱和度用于背景，减少饱和度。所有这些都保持相同的色相。

色彩和谐方案

单色

一个色相跨越一系列明度和饱和度值。营造凝聚力和精致感。极简设计的稳妥选择。

Base: hsl(220, 80%, 50%)
Light tint: hsl(220, 80%, 90%)
Mid shade: hsl(220, 80%, 35%)
Dark shade: hsl(220, 80%, 20%)

互补色

色轮上相对（180° 间隔）的两种颜色。高对比度——适合背景上的行动号召按钮。使用一种颜色作为主色，另一种作为强调色。

Blue hsl(220, 80%, 50%) + Orange hsl(40, 80%, 50%)

分裂互补色

一种基色加上其互补色相邻的两种颜色。比互补色更细腻——高对比度但视觉上不那么激进。

类似色

色轮上相邻（约 30–60°）的三种或更多颜色。营造和谐和自然感。常见于自然灵感的设计中。

三色组

均匀间隔（120°）的三种颜色。生动且平衡。需要谨慎管理——通常一种主色，一种次要色，一种强调色。

四色组（方形）

90° 间隔的四种颜色。丰富的调色板但难以平衡。仅将饱和版本用于强调色。

色调、暗调和中间调

一个色相可以产生一系列可用颜色：

• 色调（Tint）：添加白色（增加明度）。用于背景、悬停状态。
• 暗调（Shade）：添加黑色（降低明度）。用于文本、边框、阴影。
• 中间调（Tone）：添加灰色（降低饱和度）。用于柔和的 UI 元素。

UI 调色板的实用刻度：

这种方法类似于 Tailwind CSS、Material Design 和 Radix UI Colors 等设计系统。

可访问性：对比度

WCAG 2.1 可访问性指南要求文本和背景之间的最小对比度：

• AA 级别：普通文本 4.5:1，大文本（18pt+）3:1
• AAA 级别：普通文本 7:1，大文本 4.5:1

常见失败模式：

• 白色背景上的浅灰色文本（通常 #999 在白色上失败）
• 相似明度的彩色文本在彩色背景上
• 仅图标的按钮没有足够对比度

快速规则：如果文本和背景具有相似的明度值（两者都亮或都暗），对比度将不足。目标是明度差至少 40–50 个百分点。

在 CSS 中应用调色板

一旦有了调色板，在 :root 级别将其定义为 CSS 自定义属性：

:root {
  --color-primary-50:  hsl(220, 80%, 95%);
  --color-primary-100: hsl(220, 80%, 90%);
  --color-primary-500: hsl(220, 80%, 50%);
  --color-primary-600: hsl(220, 80%, 40%);
  --color-primary-900: hsl(220, 80%, 10%);

  --color-accent-500:  hsl(40, 80%, 50%);

  --color-neutral-100: hsl(220, 10%, 95%);
  --color-neutral-900: hsl(220, 10%, 10%);
}

在整个样式表中引用这些变量。调整调色板时，更改一个值即可全局更新。

深色模式调色板

深色模式不仅仅是反转浅色调色板。纯黑色（#000000）背景与白色文本产生刺眼对比。相反：

• 使用深灰色（hsl(220, 10%, 8–12%)）作为背景
• 保持主强调色相同的色相，但调整饱和度（+10%）和明度（+10%）以补偿 Helmholtz–Kohlrausch 效应（饱和色在深色背景上显得更亮）
• 背景层次使用微妙的明度增量（10%、12%、15%）而不是阴影

生成你的调色板

→ 使用 Color Palette Generator 从任何基色生成色调、暗调和互补色。以 HEX、RGB 或 HSL 格式导出值。

→ Color Converter 在 HEX、RGB 和 HSL 之间转换，以便你可以在代码库中以任何格式使用调色板值。