颜色与配色工具怎么选

4 个决策要点 · 涉及 15 款工具 · 颜色与配色 · 内容最后核对 2026-10-25

屏幕上好看的颜色，印出来未必对；能用眼睛看的对比度，未必达得到无障碍标准。

一句话结论

设计取色用屏幕取色器，调色用 HSL 或色轮，落地到网页前用对比度检查过无障碍线，涉及印刷再转 CMYK 对照。

颜色相关的困惑通常来自两个方向：一是「同一个颜色为什么换个地方就不一样」——设计稿里鲜艳的蓝，印到纸上变暗了，或者贴到网页上又变了一号；二是「我的配色到底合不合格」——自己看着对比很清楚，但有人说看不清，无障碍检测工具也报红。前者是色彩模型的问题，后者是对比度标准的问题。

先建立一个基本认识：RGB 是屏幕的颜色语言（通过红绿蓝三种光叠加），CMYK 是印刷的颜色语言（通过青品黄黑四种油墨叠印），两者能表现的色域并不相同，所以屏幕上一些特别亮、特别饱和的颜色在纸上根本印不出来，这就是「所见非所得」的根源。HSL 则是把颜色拆成色相、饱和度、亮度三个符合人类直觉的维度，调整起来比直接改 RGB 数值直观得多。

选型对照表

看逐项详解 →

你要做的事	推荐工具	为什么用这个	注意
从屏幕任意位置取一个颜色	屏幕取色器	直接吸取像素颜色，得到精确色值	注意屏幕色彩配置会影响实际观感
在 HEX、RGB、HSL 之间换算	RGB/HSL/HEX颜色互转	三种表示法互相转换，便于不同工具间传递	HSL 调明暗比直接改 RGB 直观得多
把设计稿颜色转成印刷用色	CMYK颜色对照表	对照印刷四色值，估算印出来的效果	屏幕上过亮的颜色印不出来，务必先对照
快速查各种颜色代码格式	颜色代码转换	一次性看到同一颜色的多种写法	不同语言 / 框架对颜色格式要求不同
生成一套协调的配色方案	品牌配色方案	按规则生成主色 + 辅助色 + 中性色组合	品牌色要保证在深浅背景上都可读
找互补色、邻近色做搭配	色轮配色器	色轮直观呈现色彩关系	互补色对比强烈，大面积使用容易刺眼
检查文字与背景对比度是否达标	颜色对比度检查	按 WCAG 标准给出对比度比值与是否通过	正文和标题的达标线不同，别只看一个数
从一张图片里提取配色	图片颜色提取	快速获得图片的主色调与配色分布	提取结果需人工筛选，工具会带出大量中间色
预览颜色在不同透明度下的效果	颜色透明度预览器	检查半透明叠加后的实际观感	透明度会影响与背景的实际对比度
混合两个颜色算出中间色	两种颜色混合计算器	生成渐变过渡色或中间调	注意混合空间不同结果会有差异
求一个颜色的反色	相反颜色计算器	做暗色模式、负片效果的起点	简单取反常得到刺眼的颜色，需再调
做渐变背景并拿到 CSS	CSS渐变生成器	可视化调整后直接复制可用代码	渐变两端色差太大容易出现色带
做阴影效果并拿到 CSS	CSS阴影生成器	可视化调参，实时看效果	阴影颜色不要用纯黑，偏一点主色更自然
查中国传统色 / Web 安全色	中国传统色彩	找有名字的、有文化语境的颜色	传统色的屏幕近似值与印刷值可能不同
预览一个颜色在大面积上的观感	颜色预览	看到颜色铺满页面的真实效果	小色块和大面积给人的感觉差别很大

表格中列出的工具均可直接点击进入，全部免费、无需注册。

逐项详解

全部工具总览 →

1先搞清三种色彩模型的分工

RGB 是加色模型，用红绿蓝三种光叠加出颜色，屏幕、投影、手机显示都用它，特点是「越加越亮」，最大值叠加得到白色。CMYK 是减色模型，用青、品红、黄、黑四种油墨叠印，纸张反射光呈现颜色，特点是「越叠越暗」。两者的色域并不重合：RGB 能表现的亮青、荧光绿、高饱和橙，在 CMYK 里根本调不出来，这就是为什么设计稿上的鲜艳颜色印出来会「发闷」。HSL 则不是另一套色域，而是 RGB 的另一种表述方式——把颜色拆成色相（H，0-360 度）、饱和度（S）、亮度（L），数值调整更符合直觉：想让一个颜色变暗，直接调低 L 就行，不用去猜 RGB 三个数该怎么同时改。

RGB/HSL/HEX颜色互转颜色代码转换 CMYK颜色对照表

2取色：从哪取、取多少个

取色有两种典型场景。第一种是「我知道屏幕上有个好看的色」，用屏幕取色器直接吸取像素值即可，注意屏幕本身的色温、亮度设置会影响你看到的观感，所以取到的数值应以工具显示的为准，不要凭肉眼判断。第二种是「我想从一张图片里获得一套配色」，这时用图片提色工具，但要有心理准备：工具会按像素占比输出主色调，一张照片往往能提出十几二十种颜色，其中大量是没什么用的中间过渡色。实用的做法是限定提取数量（比如 5 色），再从结果里人工挑出真正想用的两三个，剩下的作为点缀。

屏幕取色器图片颜色提取

3对比度：配色里唯一有硬标准的指标

配色的美感是主观的，但可读性有客观标准。WCAG（Web 内容无障碍指南）规定：正文文字的对比度至少要达到 4.5:1，大号文字（约 18pt 以上或 14pt 粗体）至少要 3:1；达到 7:1 则属于更高一级的 AAA 标准。对比度是两色相对亮度的比值，不是色差——也就是说两个色相完全不同但亮度接近的颜色，对比度可能很低，看起来「颜色不一样」但实际上看不清。这一点在做浅色主题、灰色文字、彩色按钮时最容易踩坑，所以任何正式上线的文字配色，都应该用对比度检查工具过一遍数值，而不是凭眼睛判断。

颜色对比度检查颜色预览

4从配色到代码：渐变与阴影

配好色之后，最后一步是把它变成可用的代码。渐变和阴影是最常需要精确调参的两个效果，因为它们的参数（角度、色标位置、模糊半径、偏移量）靠手写 CSS 反复试非常低效。用可视化工具的好处是所见即所得：拖动滑块立刻看到效果，满意后直接复制生成的 CSS 代码。两个经验：渐变两端的颜色差不要太大，否则在低端屏幕或低色深输出上会出现明显的色带（banding）；阴影的颜色不要用纯黑，用主色偏暗的版本会更通透自然。

CSS渐变生成器 CSS阴影生成器

关于「颜色与配色工具怎么选」的常见问题

为什么设计稿上的颜色印出来不一样？

因为屏幕用 RGB（加色，靠光叠加），印刷用 CMYK（减色，靠油墨叠印），两者的色域并不重合。屏幕能显示的一些高饱和、高亮度的颜色（如荧光绿、亮青），CMYK 油墨根本调不出来，只能取最接近的替代色，于是看起来就「发闷」或偏色。所以涉及印刷的设计稿，应当尽早用 CMYK 对照工具确认关键色是否能还原。

HEX 和 RGB 有什么区别？

它们描述的是同一个颜色，只是写法不同。HEX 是十六进制写法（如 #2b7fd4），把红绿蓝三个分量的 0-255 值转成两位十六进制拼起来；RGB 是十进制写法（如 rgb(24, 144, 255)）。转换是纯粹的数值换算，不会有任何颜色偏差。选择哪种只取决于使用场景——CSS 两种都支持，某些设计工具或配置只认其中一种。

HSL 比 RGB 更好用吗？

在「调色」这件事上通常更好用，因为它把颜色拆成了符合直觉的三个维度：色相（是什么颜色）、饱和度（有多鲜艳）、亮度（有多亮）。想让主色变浅，直接调高亮度就行；想做一个同色系的深色版本，保持色相和饱和度、只降亮度即可。用 RGB 做同样的事，需要同时猜三个数字该怎么变，非常不直观。

对比度多少才算合格？

按 WCAG 标准：正文文字的对比度至少要 4.5:1，大号文字（约 18pt 以上，或 14pt 加粗）至少 3:1。达到 7:1 属于更严格的 AAA 级别。注意对比度衡量的是两色的相对亮度比，与色相差无关——两个色相完全不同但亮度接近的颜色，对比度可能很低。做浅灰文字、彩色按钮、暗色模式时尤其要用工具核对数值。