配色网站图片取色总偏灰？先查这三处
压缩噪点、色彩配置、透明度叠加，是取色失真的三大来源，逐个排查比反复重取快得多。
看排查方法 →
首页公司简介
配色网站 · 关于我们
配色网站是一个把配色这件事讲清楚的编辑部：我们不做炫技的生成器，而是把取色、选色、验色每一步的判断标准和常见坑，整理成可核对、可复现的文字。你看到的每个结论，我们都尽量给出依据和验证方法。
01 / 我们是谁
先界定：配色网站到底在做什么
把「配色」拆成能验证的步骤，而不是一句「这个颜色好看」。
我们是谁？一句话：配色网站是几个长期跟颜色打交道的人凑起来的编辑部。有人做前端，有人做视觉，有人常年跟印刷厂扯色差。我们见过太多人卡在同一类问题上——图片里那抹颜色取出来放到网页上就变味了，明明照着大牌抄的配色，自己用上去却显脏，深色模式上线后文字糊成一片。这些问题不是审美不够，而是缺一套可核对的流程。
所以本站专注做的事很具体：把配色网站该讲清的东西讲透。取色时哪些因素会让颜色失真、色板生成背后的互补与邻近关系怎么推导、对比度检测的数值门槛从哪来、导出成 HEX 和 RGB 之后到代码里怎么落地——每一步都给到可复现的判断方法。你照着做，能自己得出结论，而不是听我们说「这样更好看」。
我们为用户解决的核心问题，是「判断」而不是「结果」。工具站给你一堆颜色，我们更愿意告诉你：这组颜色在什么场景下能用、换到别的背景上还成不成立、屏幕上看没问题但印出来会不会偏。编辑部内部有个习惯，任何一条结论落笔前都要问一句「这条能不能被别人验证」，验证不了的，就标成待确认，暂不下结论。
坚持的理念说来朴素：能核实的才写，核实不了的留白。我们不展示无法追溯来源的数据和评分，也不编造具体的获奖、名单或合作方——凡是涉及外部信息的，都以官方与公开资料为准。这不是保守，是我们觉得一个讲方法的站，自己先得经得起核对。
- 站点性质信息导航 / 内容解析
- 专注方向取色 · 色板 · 对比度
- 账号体系无，公开可读
- 内容来源公开资料 + 实测核对
02 / 精选内容
配色网站近期值得先看的几篇整理
按读者反馈频率排的，不按发布时间。标题前的方括号是内容类型，点进去可以先看对应的页内章节。
一组配色够不够用，看这四件事
主色、辅助色、背景、文字色各司其职，先确认角色再谈数量，比堆五六个颜色踏实。
看角色分配 →配色网站对比度数值到底从哪来
相对亮度怎么算、为什么是 4.5 和 3，把公式背后的直觉讲明白，你就不会盲调了。
看相关问答 →深色界面里最容易翻车的三种配色
纯黑配高饱和、低明度同色系、暖色大面积铺底，翻车原因各不相同，处理办法也不同。
看要点 →配色网站屏幕好看、印刷偏色的常见原因
发光色与油墨色的显色原理不同，同一组 HEX 值印出来偏色几乎是必然，得提前换算预期。
看色差说明 →色值格式怎么选：HEX、RGB 还是 HSL
写代码用 HEX 顺手，调明暗用 HSL 直观，两者互相换算的门道值得花十分钟弄明白。
看格式建议 →03 / 深度解读
配色网站的内行用法：新手怎么快速上手
这一节是整页最实在的部分。我们按真实工作顺序拆成四步，每步都写清容易踩的坑。
第一步：取色之前，先确认你的参照物是「真色」
很多人第一步就错了——对着截图取色。截图本身可能已经过压缩、缩放和色彩配置转换，取出来的值和你眼睛看到的并不一致。比较稳的做法是尽量拿到原始图片或设计稿源文件，实在拿不到，至少确认三点：图片没有被社交平台二次压缩过、查看时的显示器没有开护眼或夜览模式、截图工具的取色读数与肉眼感知对得上。
另一个高频坑是透明度叠加。你在一个半透明蒙版上取色，取到的其实是混合后的结果，这个色值放到别处就不成立了。遇到这种情况，要么找到蒙版下层的原色，要么干脆承认这个颜色依赖上下文、不适合当独立色值复用。
第二步：把颜色按「角色」分配，而不是按「数量」堆
一组能用的配色，通常有四个角色：主色承担品牌识别，辅助色做点缀和状态提示，背景色负责承载，文字色保证可读。新手最常见的误区是先凑够五六个好看的颜色，再硬塞进界面，结果每个都想突出，反而没有重点。更顺的顺序是先定背景与文字这一对——这两者决定可读性底线——再往中间填主色和辅助色。
判断辅助色够不够用，有个简单办法：把它放到实际尺寸的文字上、放到按钮里、放到大面积背景上各看一遍。很多颜色小面积看着清爽，放大成背景就发闷。
第三步：对比度不是可选项，是硬门槛
正文文字与背景的对比度建议不低于 4.5:1，大字号和次要文字可以放宽到 3:1。这两个数值不是拍脑袋定的，背后是相对亮度的计算：先把颜色换算到线性空间，加权求和后再套对比度公式。你不用每次手算，但要理解一件事——明度差才是对比度的主要贡献者，两个色相完全不同但明度接近的颜色，对比度往往低得吓人。
这里特别提醒深色界面的坑：纯黑背景配高饱和亮色，短时间内很抓眼，长时间阅读却容易疲劳；更稳的做法是把背景提亮一点点、把前景色饱和度压一压，让明度差足够但刺激感下降。
第四步：色值落到代码里，别在最后一公里丢掉
导出成 HEX 写进 CSS 是最省事的，但要注意两件事：一是同一个色值在不同颜色空间里可能有细微差异，跨设备观感不完全一致是正常的，不必追求像素级一致；二是记得把颜色抽成变量而不是散落在各处硬编码，改一次主色要能全局生效。HSL 在调明暗时更直观，适合做派生色，但最终对外输出仍建议统一格式，减少维护成本。
屏幕与印刷之间还有一道坎：屏幕是发光显色，印刷是油墨反射显色，同一组数值印出来偏色几乎是必然。做印刷物料时，最好提前用色卡比对，并把预期从「和屏幕一模一样」调整为「在可接受色差范围内」。
几个我们反复提醒的坑
其一，别迷信「一键生成的高级感配色」，生成器给的是起点不是终点，落地前一定要放到真实内容里验。其二，别忽略无障碍，色弱用户对红绿差异的辨识有限，状态提示不能只靠颜色，得配图标或文字。其三，别在没核对来源的情况下照抄大牌的配色值，很多品牌色是注册保护的，商用前先查清使用条款。其四，测试时至少换两三种设备看一遍，不同屏幕的色域表现差异不小。
关于外部信息，我们的态度是：凡是涉及具体品牌、具体标准版本、具体数据来源的，都以官方文档和公开资料为准，暂无法核实的具体名单、日期与数量一律不臆造，需要时标注出处而非凭印象下结论。
04 / 常见问题
配色网站读者问得最多的六个问题
每条答案先给结论，再补细节。点开看完整说明。
配色网站到底是什么，和在线取色工具有什么不一样？
结论：配色网站是一个讲清配色方法与判断标准的资讯整理站，而不是一个托管取色器的工具站。我们把取色、色板生成、对比度检测这些环节的原理、步骤和常见坑写成可核对的文字，工具怎么用、参数代表什么、结果怎么验，都尽量说清楚。具体方法可以看本页 #jiedu 的深度解读。
用配色网站需要注册或登录吗？
结论：不需要。本站全部正文都是公开可读的静态内容，不设账号体系，也不要求留下手机号或邮箱才能看文章。你唯一会用到邮箱的场景是主动给我们写反馈、投诉或商务邮件，那是你自愿发起的。
本站安全吗，会不会上传或保存我自己的图片和配色文件？
结论：本站不上传、不托管、不代理任何用户文件，也没有图片处理服务器。我们只做信息整理，你在别处用取色工具时上传的图片归属那个工具，与本站无关。关于内容边界，可以对照 #notice 的几条说明逐条看。
配色网站多久更新一次内容？
结论：按内容成熟度更新，不凑固定频率。方法论类文章一旦核对完就长期有效，我们只在发现表述有误或标准变化时修订；工具与标准动态类内容会不定期补充。具体修订日期以页面可见的更新时间为准，凡是还没核实清楚的，我们宁可先空着也不硬写。
发现文章里有错误或过时信息，怎么反馈？
结论：发邮件到 idea@peiseiwangzhan.cn，写清页面标题和具体段落即可。建议附上你认为正确的依据（标准文档、官方说明或可复现的步骤），我们核对后会修订并在页面更新时间上标注。涉及版权投诉请改发 complaint@peiseiwangzhan.cn，一般 48 小时内处理。
配色网站和调色板生成器、设计灵感类站点的区别在哪？
结论：它们给结果，我们主要给判断方法。生成器一键出五色板很省事，但你得知道那套配色在深色背景上对比度够不够、印刷会不会偏色；灵感站给观感，但不解释为什么好看。本站把重点放在可复核的标准与步骤上，帮你判断一个配色能不能用。
05 / 内容定位
关于本站内容的几点说明
这几条是本站的边界，写在这里是为了让你清楚我们做什么、不做什么。
- 本站是信息导航与内容解析站。我们整理配色相关的公开知识、方法与经验，定位是帮助读者理解和判断，不提供在线取色、图片处理等工具服务，也不是任何软件或品牌的官方页面。
- 不托管、不上传、不代理任何文件或流媒体。本站不设文件上传入口，不存储用户图片与配色文件，也不代理第三方资源的分发。你在本站看到的只有文字与说明性配图。
- 信息来源以公开页面为准，版权归原作者。文中涉及的标准、工具与行业惯例，均来自公开可查的资料并尽量标注出处；引用内容仅用于说明与评述，版权归原权利人所有。
- 侵权投诉渠道与处理时效。如你认为本站内容侵犯了你的合法权益，请发邮件至 complaint@peiseiwangzhan.cn，附上权属证明与具体链接，我们一般在 48 小时内核实并处理。
- 不展示无法核实的数据与评分。我们没有第三方评测资质，因此不发布评分榜、不公布未经核实的下载量与使用量，也不编造合作方名单与获奖记录。信息尚未确认时保持空缺，不做猜测补齐。
- 未成年人使用提示。本站内容面向设计与开发学习场景，整体适龄；如未成年读者在阅读中遇到不理解的技术表述，建议在监护人陪同下参考官方文档。
06 / 协作与引用
我们长期参考与致意的公开资料方向
这里列的是资料来源的「方向」，不是合作方名单。凡未取得正式授权的机构名称，我们一律不挂 logo、不写成合作伙伴。
标准类
配色网站无障碍对比度规范
对比度阈值的依据主要来自公开的无障碍指南，我们按原文核对后转述，不擅自改数值。
色彩模型
配色网站色彩空间与显色原理
屏幕与印刷的显色差异，参考的是公开的色彩管理说明与行业通行做法。
前端实践
配色网站设计令牌与变量化
颜色如何抽成变量、如何做主题切换，参考前端社区公开的工程实践总结。
印刷实务
色卡与色差控制
涉及印刷偏色的部分，以公开的色卡比对方法与可复现步骤为准。
07 / 编辑部
配色网站写这些字的三个人
每篇文章至少两人交叉核读，署名的是主要执笔与核对人。
林砚
主编 · 方法论负责取色流程与对比度类文章的选题和核对，习惯把每个结论都拆成可复现的步骤。
周迟
编辑 · 前端实现专注把配色方案落到 CSS 变量与设计令牌上的实操内容，偏爱能直接抄走的最小示例。
俞禾
编辑 · 视觉与印刷负责屏幕色彩与印刷色差相关的核验与案例整理，常说「先看纸，再信屏」。
09 / 联系我们
有事找编辑部，邮箱直连
我们不开电话、不设在线客服窗口，所有沟通都走邮件，便于留存和追溯。
主体名称配色网站编辑组
所在城市浙江 · 杭州
意见反馈idea@peiseiwangzhan.cn
投诉举报complaint@peiseiwangzhan.cn
商务合作business@peiseiwangzhan.cn
用户客服help@peiseiwangzhan.cn
所在城市浙江 · 杭州
意见反馈idea@peiseiwangzhan.cn
投诉举报complaint@peiseiwangzhan.cn
商务合作business@peiseiwangzhan.cn
用户客服help@peiseiwangzhan.cn
如果你在读某篇文章时卡在某个步骤，别自己憋着——把页面标题和你卡住的那句话发到反馈邮箱，我们核对后会把说明补进正文，让下一个人少绕一圈。
10 / 延伸阅读
接着往下看
都在本页范围内，不用跳出去。