如何搭一套配色（以及在 HEX、RGB、HSL 之间转换）

2026年10月1日

颜色是设计里决定得最快、后悔得最久的那个决策。五分钟选出来的配色，最后会出现在 logo、网站、幻灯片和名片上——之后想改，就得全部改一遍。

好消息是：一套能用的配色不靠品味，靠几条约束，而且这些约束很好检查。

从图片里提取颜色

最快的起步方式，是从某个已经看着舒服的东西里把颜色抽出来——一张照片、一张产品图、一幅画。调色板生成工具做的就是这件事：按相似度把像素聚类（这个技术叫中位切分量化），返回真正占主导的那些颜色。

有两件事它不会替你做。

“占主导”不等于“好看”。 一张照片里占主导的颜色，通常是背景、天空或肤色——不是你会想拿来当品牌强调色的那些。一张海滩照会给你沙子、天空和海水，全是低饱和、明度接近的颜色。这是一次准确的提取，也是一套糟糕的配色。

提取不知道这些颜色要用来干什么。 一套配色需要深色、浅色和中间的层次，因为文字、背景和强调色的职责不同。你从图片里拿到的是一组颜色，不是一个系统。

两个问题的解法一样：先提取，再挑选。提取之前把图裁到“颜色真的来自这里”的那块区域——把产品照裁到只剩产品，背景就整个从结果里消失了。

三者描述的是同一些颜色，差别在于有多容易推理。

HEX（#3B82F6）最紧凑，在 CSS 里最常见。它是三个 RGB 通道的十六进制编码。用来交付极好，用来思考极差——你没法看着 #3B82F6 说出它变亮一点是什么样。

RGB（rgb(59, 130, 246)）是同一份信息写成三个数字。更好读，而且需要透明度时就得用它：rgba(59, 130, 246, 0.5)。

HSL（hsl(217, 91%, 60%)）按人的方式描述颜色：色相、饱和度、明度。这个才值得用来思考，理由只有一条——调一个颜色是改一个数，而不是三个。 在 HSL 里把蓝色调亮，抬高第三个值；调灰，降低第二个值。换成 HEX 去调同样的事，你就是在猜。

多数设计系统的实际工作流是：用 HSL 定义，用 HEX 交付。 把 HSL 值当作事实来源存下来，这样以后能生成一致的色阶，交付时再转成 HEX。颜色转换工具在三者之间即时互转，这才让上面这套做法变得实际，而不是学究气。

有了基色之后，你需要一个范围——给背景用的浅色、给文字用的深色、给悬停态用的中间色。

错误做法是只改明度。一个满饱和度的颜色提亮 20%，会同时变得粉嫩和刺眼。两个调整能让色阶保持协调：

提亮时降饱和。 浅色在变亮的过程中丢掉一些彩度才自然。90% 明度配 100% 饱和度是个警告色；配 40% 饱和度就是个能用的背景色。

压暗时也降饱和。 高饱和度的极深色读起来发浑。深色通常想要 40–60% 的饱和度。

一个品牌色的可用色阶，一般是五到九档，从近白到近黑，共享同一个色相。这足够覆盖背景、边框、文字和各种状态，不用再引入第二个色系。

一套配色可以很漂亮，同时在那项唯一重要的可读性测试上不及格。

《网页内容无障碍指南》定了线：正文文字 4.5:1 对比度，大号文字和交互控件边界 3:1。 这不是审美偏好——这是文字对视力不佳的人、在劣质屏幕上、或在阳光下的可读性拐点。

陷阱在于：这些失败对选色的人来说是看不见的。白底上 4:1 的灰字，在设计师校准过的显示器上看着完全没问题，在亮度 30% 的手机上就消失了。

两个习惯能防住它：

永远不要把文字色和背景色分开选。 定稿之前，把它们当成一对，按比值检查。

记住对比度看的是亮度，不是色相。 两种颜色可以看着差别很大、亮度却几乎一样——高饱和的蓝和高饱和的红就是经典例子。把两者都转成 HSL 比一下 L 值，是最快的自检：两个 L 数字接近，对比度就差，跟颜色看起来多不一样无关。

一套配色该有多少个颜色？ 一个主色、一到两个强调色，加一条五到九档的中性色阶。再多，跨团队就维持不住一致性了。

CSS 里该用 HEX 还是 RGB？ 不透明的颜色用 HEX，需要透明度时用 rgb() / rgba()。现代 CSS 里 HSL 也能用，而且它最适合用来存你的源值。

为什么我提取出来的配色看着很闷？ 因为照片里的主导色通常是背景——低饱和、明度接近。提取前先裁到主体，或者把提取结果当起点，把饱和度往上调。

我需要多少对比度？ 正文 4.5:1，大号文字（大约 18pt 或 14pt 加粗）和 UI 控件边界 3:1。任何必须在恶劣条件下都能读的内容，越高越好。

整个设计只用一个颜色行吗？ 行，而且单色相配色往往是最协调的。你需要足够的明度跨度把文字和背景分开——通常五档以上。

怎么把一个颜色调亮而不发灰？ 明度和饱和度同时动：提亮的同时降饱和。满饱和度提亮，就是那种“粉嫩又刺眼”效果的来源。