填两个 HEX 颜色, 算出感知色差 ΔE。CIE76 / CIE94 / CIEDE2000 三种公式, 还给出大白话解读, 浏览器本地运算
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
| CIEDE2000 | 7.13 | 一眼就能看出差别 (2 ≤ ΔE < 10) |
| CIE94 | 7.43 | 一眼就能看出差别 (2 ≤ ΔE < 10) |
| CIE76 | 9.16 | 一眼就能看出差别 (2 ≤ ΔE < 10) |
印刷和包装厂常把品牌色控制在 ΔE2000 ≤ 2; ΔE 约等于 1 大致就是训练有素的眼睛在印张上能察觉的临界点。纺织和涂料配色一般更宽 (ΔE ≤ 3–5)。超过 10 在任何人看来都已经是明显不同的颜色。
这个工具能做什么
免费的 Delta E(ΔE)色差计算器。填入两个 HEX 颜色, 工具先把每个颜色 转成 CIELAB, 再算出它们在人眼里看起来差多远, 而不是只看 RGB 数值差。 三种公式按需要选: CIE76 是 Lab 空间里的直线(欧氏)距离, CIE94 加了 印刷图形行业的彩度加权, CIEDE2000 是当下印刷和品牌规范最常引用的现代 标准。结果配一句大白话解读: ΔE 小于 1 肉眼看不出, 1 到 2 要仔细看才 能分辨, 2 到 10 一眼就看得出, 超过 10 已经是明显不同的颜色。并排色块 加上两个颜色完整的 Lab 值, 让你一眼看明白这个数为什么落在这里。全部 在浏览器里运算, 一键复制, 分享链接可还原同一对颜色和公式。100% 浏览器本地, 不上传。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 10 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Delta E 色差计算器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
品牌色送印前签字确认
品牌蓝锁定在一个 HEX 值, 印厂回的打样你采样到一个略有出入的 HEX。 两个都填进去, 切到 CIEDE2000, 读 ΔE。落在 2 以内就批准开机, 到了 ΔE 5 就退回去要求印得更贴近。并排色块和 Lab 读数让你有实打实的东西 附到邮件里, 而不是只说一句"看着有点不对"。
对比配色板里两个几乎一样的色
你接手一套设计系统, 里头两个灰色像是重复的, 一个 #6b7280 一个 #6c727d。 它们到底是两个色还是有人手滑填错了?两个一粘, ΔE 立刻告诉你: 小于 1 就说明视觉上是同一个色, 可以合并成一个 token, 替下游所有人省掉一次 毫无意义的纠结。
检查一次 CSS 改动有没有真的改变颜色
同事调了一个按钮背景, 你拿不准这改动是不是肉眼可见。把改前改后的 HEX 一对比: ΔE 小于 1 说明改了等于没改, 大概不值得发版; ΔE 到 4 说明用户会注意到, 那就该写进更新日志, 也许还要走一遍设计评审。
讲清楚或弄明白为什么 RGB 距离会骗人
给一个班或一位新人讲色彩科学?填一对蓝和一对绿, 让它们的 RGB 差距 相同, 再看它们的 ΔE 差得有多远。三公式对照表一屏就把话说明白: CIE76 高估了蓝、CIEDE2000 把它纠正回来, 感知解读落在眼睛真正的 位置上。
常见踩坑
把 RGB 或十六进制的距离当成感知差异。hex 差很大的两个色可能几乎一样, 差很小的两个色反而差很多。只有 Lab 里的 ΔE 才跟得上眼睛看到的, 所以一定要先转换, 这一步工具替你做了。
该用 CIEDE2000 时却用了 CIE76。CIE76 高估饱和蓝、低估浅灰, 按 CIE76 合格的一对可能在感知上不合格。除非老标准明确点名 CIE76, 否则默认用 CIEDE2000。
宁信没校准的显示器也不信数值。屏幕若是广色域、开了夜间模式、或干脆没校准, ΔE 很小的两个色在你这块屏上仍可能看着不同。ΔE 描述的是颜色本身, 凭肉眼判断前先校准显示器。
隐私说明
每一步运算, 包括 HEX 解析、sRGB 到 CIELAB 的转换、以及三种 ΔE 公式, 都是浏览器标签页里运行的纯 JavaScript。你填的颜色不离开页面, 也不记录任何 东西。唯一要注意: 分享链接会把两个颜色和所选公式写进查询字符串, 所以 把"分享链接"粘到聊天里, 对方服务器的访问日志会留下这些 HEX 值。涉及 保密的品牌色, 请用复制按钮粘贴文本, 而不是分享网址。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。