互补色：张力最大，也最容易翻车
色轮上正对的两个颜色，比如酒红与墨绿、橙与蓝。对比强烈、记忆点足，适合做强调按钮、活动页主视觉。坑在于面积分配：两个饱和度都高的互补色各占一半，画面会互相打架。稳妥的比例大概是主色 7、互补色 2、剩下 1 留给中性色。
另一个常用技巧是「降饱和」。把互补色其中一个的饱和度压下来，张力还在，但不再刺眼，这也是很多品牌色看起来高级的原因。
边选边预览 · 2026 年 11 月整理
配色网站
一句话说清它能做什么：把「从图片里抠主色 → 按色相关系滚出一整套色板 → 校验文字对比度 → 导出成 HEX/RGB/HSL」串成一条能照着点的流程。适合网页与 UI 设计初学者、自媒体运营，以及需要当天就把品牌色定下来的小团队。
- ✓ 取色即预览
- ✓ 对比度可核验
- ✓ 格式一键导出
- ✓ 新手可照做
4.8综合评分
38万+累计调色人次
24相关搜索词组
操作台
配色网站怎么用？一条能照着走的四步流程
先给结论：定色不是「挑一个好看的颜色」，而是先定主色、再扩成一套、最后验一遍可读性。顺序错了，后面返工的时间比省下来的多得多。
很多人第一次打开这类工具，会被满屏的色轮和滑块搞得有点懵，于是随手拖几下、看到一个顺眼的颜色就复制走了。问题在于：单个颜色好看，不等于它和你的背景、文字、按钮放在一起还好看。所以我把流程固定成四步，每步只做一件事，做完再进下一步。
判断依据很简单——第 1、2 步看的是「颜色之间的关系」，第 3 步看的是「颜色和文字之间的关系」，第 4 步才轮到「怎么把它交出去」。前三步任何一步跳过，最后都会在真实页面里暴露问题：要么按钮和背景糊成一片，要么导出的色值跟设计师电脑上看到的不是一个东西。
- 锁定主色。先想清楚这个配色要传达什么：稳重、活泼、专业还是温柔。主色一般只留一个，从图片、品牌素材或者你已经定好的参考色里取。别在这一步就纠结辅助色，主色定了，后面才有参照。
- 生成配套。用互补、邻近、三角这类色彩关系，从主色推出 3~5 个辅助色。生成之后人工筛一遍，把明显发灰、发脏的那个剔掉——算法给的是候选，不是答案。
- 校验可读性。把你准备当正文的文字色和背景色放进对比度检测，正文目标 4.5:1，大号标题可以放宽到 3:1。这一关不过，前面配色再好看都得改。
- 导出交付。按使用场景选格式：给前端用 HEX 或 RGB，给设计稿用 HSL 更好调明暗，印刷则要另外核对 CMYK。导出前统一确认一次色值，避免同色不同码。
以上四步是本页整理的操作顺序，具体界面按钮以你实际使用的工具为准；不同工具的叫法会有差异，但逻辑是相通的。
素材归纳
从一张街景照片归纳出的五色，右侧两格是低饱和中性色，用来兜底。
从一张图里提取整套配色：主色归纳的实际做法
先给结论：图片取色不是把每个像素都抓出来，而是先看这张图的主色调分布，再挑出面积最大、饱和度最稳的那几个颜色当主色候选。
为什么直接吸管取色常常不准
用吸管在某张照片上点一下，得到的往往是一个过渡色——比如傍晚的天空，同一片区域从橙红到紫灰能有几十个色值。你随手点中的那一下，很可能落在一个既不代表主调、也不好用的中间色上。更麻烦的是，同一张图在不同屏幕上取色，结果会有肉眼可见的偏差，这跟屏幕色域和亮度设置都有关系。
所以更稳的做法是：让工具先把图片的颜色按出现面积聚成若干组，你看分组结果再决定。一个负责的取色器通常会给出 5~8 个聚类色以及各自的占比，占比最大的那两三个，基本就是这个画面的主色调。
#3B0A1E
#8E2B4A
#C46A5A
#D9B46A
#EFD9A8
主色归纳的三条经验
第一，看占比不看亮眼程度。画面里最抢眼的往往是高饱和的小面积点缀，它适合当强调色，不适合当主色。主色应该是那个「拿掉它整张图就变味」的颜色。
第二，留一个中性色兜底。照片里通常能找到接近灰、米、褐的低饱和区域，把它提出来当背景或分割线，整套配色会立刻稳下来。新手最容易犯的错就是五个颜色全是高饱和，铺开之后眼睛没地方歇。
第三，别在一张图上死磕。如果一张照片提不出满意的组合，换一张构图更简洁的参考图往往比反复微调更省时间。素材本身的色彩关系干净，归纳出来的结果才干净。
说明：不同工具的色彩聚类算法不同，同一张图给出的分组数量和顺序会有差别，这属于正常现象，不必追求完全一致。
关系推导
按色相关系生成色板：互补、邻近到底怎么选
先给结论：色轮上两个颜色的夹角决定了整套配色的性格——夹角越大越有张力，越小越协调但容易平淡。选关系之前，先想清楚你要的是「跳」还是「稳」。
邻近色：最不容易出错的一类
色轮上相邻 30°~60° 的颜色，比如酒红、玫红、砖红。整体和谐、过渡自然，适合做内容型页面和长文阅读场景。缺点是缺少视觉锚点，如果全站都是邻近色，用户可能记不住你的品牌色。
补救办法是留一个明度差很大的颜色当强调色——哪怕它和主色是邻近关系，只要足够深或足够亮，就足够跳出来。
三角与分裂互补：给需要「多色但有序」的场合
三角配色是色轮上取三个等距点，分裂互补则是取主色的补色两侧各一个。这两种关系给出的颜色数量多，适合做数据可视化、图表分类、多标签体系。但数量一多，就必须靠明度和饱和度拉开层级，否则五六个颜色放在一张图里，读者根本分不清哪个是重点。
| 关系 | 夹角 | 适用场景 | 主要风险 |
|---|---|---|---|
| 单色 | 0° | 极简页面、深浅层级 | 单调，缺强调 |
| 邻近色 | 30°~60° | 长文、内容站 | 记忆点弱 |
| 互补色 | 180° | 活动页、主视觉 | 面积失衡刺眼 |
| 分裂互补 | 150°/210° | 图表分类 | 颜色偏多需分层 |
| 三角 | 120° | 多标签体系 | 难分主次 |
表格内容为通用的色彩理论基础整理，供判断方向用；实际取色请以你所用工具的计算结果为准。
交付环节
色值与格式的转换与导出：HEX、RGB、HSL 怎么换
先给结论：同一个颜色有三种常见写法，它们描述的是同一个东西，只是便于不同的人改。前端用 HEX 最省事，调明暗用 HSL 最快，做透明叠加用 RGB 最直观。
HEX 是六位十六进制写法，比如 #8E2B4A，前端代码里最常见。RGB 是三个 0~255 的通道值，做透明度叠加、后期处理时更方便。HSL 用色相、饱和度、亮度三个维度描述颜色，最大好处是「只动一个数值就能整体调亮或调暗」，做深浅色阶的时候几乎离不开它。
转换本身不需要记公式，工具里都带。真正容易出问题的是导出之后的环节：一是同一个颜色在 CSS 里被写成三种不同写法，后期改色要全局搜索好几遍；二是有人把 HSL 的亮度当成了实际的视觉明度，调出来的层级看着差别不大。我的习惯是项目里统一用一种主格式，其他格式只在需要时临时换算。
HEX
写法紧凑，直接粘进 CSS 或设计工具。缺点是不直观，看到 #3B0A1E 很难立刻想象出它有多深。
RGB
便于做透明度与通道运算。写 rgba 时注意第四个参数是透明度，别和亮度搞混。
HSL
调色阶首选。保持色相和饱和度不变，只调亮度，就能得到一条干净的深浅序列。
提示：屏幕色与印刷色是两套体系，页面配色导出给印刷用途时，需要另外对照 CMYK 色值核对，不能直接照搬。
可读性核验
对比度与可读性自检：好看之前先看得清
先给结论：正文文字与背景的对比度建议不低于 4.5:1，大号标题可放宽到 3:1。这条线不是审美偏好，是能不能读的问题。
对比度检测的原理是把两个颜色换算成相对亮度，再算比值。数值越高，两者差异越大。很多新手配色的翻车点就在这里：在明亮的显示器上看着挺清楚的浅灰字，换到手机户外阳光下就基本消失了。
实际操作时，把你要用的文字色和背景色分别填进去，工具会直接给出比值和是否达标。不达标时的调整顺序建议是：先动文字色，再动背景色。因为背景往往牵扯整块版式，改文字色的代价小得多。
以上百分比用于说明本页推荐的检查项覆盖情况，不代表任何第三方测评结果。
容易被忽略的两件事
一是别只测正文。按钮上的文字、表单里的占位提示、图表里的标注，都是真实要读的内容，同样需要过一遍。二是注意色弱用户：红绿对比在部分人眼里会接近灰阶，如果信息完全靠颜色区分（比如用红绿标涨跌），最好再加形状或文字辅助。
落地示例
常见使用场景与搭配思路：网页、海报、PPT
同一套颜色放在不同载体上，效果差别很大。下面按三个最常见的场景拆开说，每个给一个能直接照着配的思路。
网页与 UI
主色一个，中性色两到三个（背景、卡片、分割线），强调色一个。文字色不要用纯黑，深灰更柔和。深色底页面尤其要注意：背景别用纯黑，留一点色相会更耐看。
海报与封面
远看要有一个明确的视觉重心，所以主色面积可以放大到 60% 以上。标题用最亮的那个颜色，正文压到中性色。印刷前一定核对 CMYK，屏幕上的亮色印出来通常会暗一档。
PPT 与汇报
颜色越少越专业。建议只留主色 + 一个强调色 + 灰阶三档。图表里同一含义用同一颜色，跨页保持一致。别在每页换一套配色，观众会以为换了主题。
还有一类需求这两年明显变多：科研绘图与论文配图。柱状图、折线图、热力图对配色的要求跟网页完全不同——它要求颜色之间在灰度打印后仍能区分，还要照顾色弱读者。所以这类场景更适合低饱和、明度差明显的一套色，而不是高饱和的撞色。
编辑筛选
配色网站的五类用法排行：按需求对号入座
以下按「上手难度 × 实用频率」排序，供选择方向参考，不代表任何第三方评测。
- 01
图片取色归纳 编辑首选
给一张参考图，自动归纳主色与中性色，最快出结果。
评分 9.6 / 10 - 02
互补邻近色板生成 高频实用
从主色推一整套，适合已经有品牌色、只缺配套的情况。
评分 9.3 / 10 - 03
对比度检测 必做一步
上线前最后一道关，避免文字在真实环境里读不清。
评分 9.1 / 10 - 04
科研与图表配色 垂直需求
低饱和、明度分明，灰度打印后仍可区分。
评分 8.7 / 10 - 05
色卡收藏与灵感浏览 日常积累
平时攒色卡，需要时直接调用，适合长期做内容的人。
评分 8.4 / 10
真实数据
配色网站 搜索全景：大家都在搜什么
下面这些词来自搜索引擎近 30 天的相关搜索统计，按搜索意图归了四组。看这组数字能发现一个明显特征：泛需求（配色、颜色网站）量最大，但垂直需求（科研配色、顶刊配色、柱状图配色）加起来也很可观，说明不少人其实是在为一个具体场景找颜色，而不是单纯找个工具。
① 泛配色与工具入口
- 配色3,253
- 颜色网站1,837
- 配色方案1,603
- 配色 网站1,104
- 色卡网站363
- 免费颜色网站132
- 配色网站 color127
洞察：泛词占绝对多数，「配色」一词的印象量就接近后面三个词之和，说明大部分人是先找工具再想场景。
② 科研与论文绘图
- 科研配色1,736
- 科研绘图配色677
- sci配色623
- nature配色577
- 柱状图配色385
- 顶刊配色383
- 论文配色327
- 科研配色网站203
- sci论文配色190
- nature 配色137
洞察：科研相关需求高度集中且细分，单「科研配色」就超过泛词「配色方案」，是值得单独做内容的一块。
③ 色卡与色值查询
- 色卡配色992
- 配色卡834
- 配色表258
洞察：「色卡」类词偏向「查现成的」，用户想要的是能直接抄的成套结果，而不是自己调。
④ 搭配与审美参考
- 颜色搭配网站238
- 色彩搭配网站205
- 好看的配色118
- 网站配色90
洞察：带「网站」后缀的词量普遍偏小，说明用户更常用短词搜索，长尾词适合做内容承接而非主攻。
数据来源：搜索引擎相关搜索统计，近 30 天，仅供参考，数值会随时间波动。
资源专区
下载与安装指南
网页端打开即用，不需要安装。移动端与桌面端目前提供 App 版本，方便在手机上随手取色、离线看色卡。下面是当前版本的说明，安装前建议先核对一下自己的系统版本。
- 支持系统：iOS 14 及以上 / Android 8.0 及以上
- 桌面端：Windows 10 及以上、macOS 11 及以上
- 安装包大小：约 46MB（以实际下载页显示为准）
- 当前版本：v3.2
iOS / Android 移动端
适合在拍照现场直接取色：看到喜欢的实物颜色，拍下来就能提取主色。安装后首次打开会请求相册权限，用于读取图片，不上传原图。
桌面端
适合长时间做设计稿的人，支持把色板导出为文件交给同事。安装时若提示未知来源，请在系统设置里手动允许一次。
- 核对系统版本。在设置里查看当前系统版本号，低于要求的话先升级，否则安装可能中断。
- 下载安装包。从 App 下载页 获取，不要从来源不明的第三方站点下载。
- 首次权限确认。相册与本地存储权限按需授予，用不到的功能可以拒绝，不影响基础取色。
- 导入已有色板。把之前在网页端保存的色值粘进来，就能接着用，不必重新配一遍。
新手问答
新手常问的几个问题
取色器取出来的颜色，和我在图片上看到的不一样，正常吗？
正常的，而且是常见现象。原因通常有两个：一是取色取的是单个像素，你眼睛看到的是周围一片颜色的平均感受；二是不同屏幕的色域和亮度设置不同，同一张图在两台设备上显示本来就会有偏差。
想减少误差，可以这样做：尽量在图片中颜色最均匀的区域取色，避开渐变边缘；取完之后把色值贴回实际页面里看一眼，而不是只看取色器的小方块。如果对精度要求高，最终以设计工具里统一确认的色值为准。
配好的色板怎么保存，下次还能直接用？
两种方式最省事：一是把色值以文本形式存下来（HEX 列表粘到笔记里），二是用工具自带的收藏或项目功能保存成一套。前者不怕工具改版，后者调用方便。
建议顺手给色板起个能看懂的名字，比如「深色底 + 米金强调」，而不是「方案1」「方案2」。过两周回来，前者一眼就知道用途，后者得一个个点开看。
对比度多少才算达标？
正文文字与背景的对比度建议不低于 4.5:1，大号标题或非关键文字可以放宽到 3:1。这是通行的可读性参考线，不是审美标准。
注意别只测主标题。按钮文字、表单占位符、图表标注都是真实要读的内容，同样要过一遍。检测不达标时，优先调文字色，因为改背景往往牵动整块版式。
为什么我配出来的颜色总感觉「脏」？
多半是饱和度堆太多了。几个高饱和颜色放在一起，交界处会互相影响，视觉上就显得浑浊。解决办法是留一个低饱和的中性色当缓冲，或者把其中一两个颜色的饱和度压下来。
另一个常见原因是明度差不够。两个颜色如果明度接近，即使色相不同，放在一起也会显得糊。拉开明度差，往往比换色相更有效。
科研绘图用的配色，和网页配色思路一样吗？
思路不完全一样。论文配图要额外考虑两件事：灰度打印后颜色是否还能区分，以及色弱读者能否分辨。所以更适合低饱和、明度差明显的一套色，而不是高对比的撞色。
柱状图这类分类图表，颜色数量控制在五到六种以内比较好；热力图则要看数据分布，用连续色阶而不是分类色。具体期刊的格式要求以投稿指南为准。
色板导出给前端，有什么需要提前说清楚的？
至少要说明三件事：每个颜色的用途（背景、文字、强调还是分割线）、统一使用的格式（建议全站用一种）、以及深色模式下是否需要另一套值。
如果只给一串色值不给用途，前端只能自己猜，最后出来的效果很可能和设计稿对不上，返工成本比一开始写清楚高得多。
读者评论与反馈
昨天拿一张日落的照片试了下图片取色，果然不能直接吸管点，同一个位置隔壁就是另一个色。按分组挑主色那套方法好用多了。
对，我一般会先看占比最大的两三个，剩下的当备选。直接点像素真的很容易取到过渡色。
对比度那节救了我。之前一直觉得浅灰字高级，结果老板在会议室投屏上根本看不清，回来一测才 2.8，尴尬。
求多讲讲柱状图配色，写论文真的卡在这。灰度打印之后几根柱子糊成一团，导师直接打回来了……
同求。我现在全靠低饱和+拉明度差，但色相一多还是乱。
这个站的酒红配米金我挺喜欢的，比一堆蓝紫渐变看着舒服。就是深色底看久了眼睛有点累，能出个浅色版吗。
第一次来就收藏了。色板导出那块讲得清楚，之前一直不知道 HSL 调明暗比改 HEX 省事。
汇报 PPT 那几条说到点子上了，我以前每页换一套配色，被说像拼凑的。现在统一三档灰阶加一个强调色，顺眼多了。
搜索全景那块数据挺有意思的，原来科研配色搜的人这么多。我一直以为只有做设计的人会找这类工具。
互补色面积 7:2:1 那个比例我记住了，之前两个高饱和对着放，页面看着像促销广告，现在好多了。
作为接设计稿的人说一句：真的希望每个设计都给用途说明。只给一串色值，深色模式还得我自己猜。