颜色匹配度计算器

精准计算颜色间的匹配程度,获取美感搭配方案

预设颜色 点击左半边设为颜色1,右半边设为颜色2

颜色 1

#1890FF

颜色 2

#FF4D4F
41匹配度
一般
可以考虑调整
互补色强烈对比,相互衬托

详细指标

色差 (Delta E)55.92
差异很大
对比度1.01:1
WCAG Fail - 不合格 - 对比度不足
色相差异150°
互补色 (150°)
RGB 距离298
最大距离: 441 (黑白)

HSL 对比

色相 (H)
209°差值: 150°359°
饱和度 (S)
100%差值: 0%100%
亮度 (L)
55%差值: 10%65%

搭配预览

这是使用颜色1作为背景的文本示例

这是颜色2的文本

这是使用颜色2作为背景的文本示例

这是颜色1的文本

渐变效果

工具概述

颜色匹配度计算器可以帮助您精准分析两种颜色之间的匹配程度,包括色差、对比度、色相关系等多项指标,帮助设计师快速找到和谐的配色方案。

指标说明

1. 色差 (Delta E)

基于 CIE Delta E 2000 算法计算的颜色差异值,更符合人眼感知:

  • < 1:几乎无法察觉差异
  • 1-2:非常接近,专业才能分辨
  • 2-10:可察觉的明显差异
  • > 10:差异非常大

2. 对比度

WCAG (Web内容无障碍指南) 对比度标准:

  • 7:1 以上:AAA 级别,适合所有场景
  • 4.5:1 以上:AA 级别,适合普通文本
  • 3:1 以上:AA Large,仅适合大文本

3. 色相关系

  • 同色系 (0-15°):色相极近,和谐统一
  • 相邻色 (15-30°):色相相邻,自然过渡
  • 互补色 (150-210°):对比强烈,相互衬托
  • 对比色 (90-150°):对比鲜明,视觉冲击

匹配度评分

匹配度评分综合考虑色差、对比度和色相关系,满分 100 分:

  • 80-100:优秀,配色非常协调
  • 60-79:良好,搭配效果不错
  • 40-59:一般,可以考虑调整
  • 0-39:较差,建议重新选择