1
Hex 和 RGB 变化
检测十六进制和 RGB 颜色值的修改，包括简写符号变化和 alpha 通道变化。
40 测试用例
颜色与主题
颜色是界面中承载意义最丰富的视觉属性之一：它体现品牌视觉规范，标示主要操作，并构建阅读层级结构。一个转化按钮的色调即便仅偏移几个色度，对于功能测试来说是无形的视觉回归，但您的访客会立刻将其感知为质量下滑的信号。在业务型界面上——银行业仪表盘、ERP系统、管理后台——不一致的颜色编码甚至可能导致数据解读错误。实际工作中，这类回归几乎总是出现在相同场景：design system 重构、CSS 框架更换、--brand-primary 之类全局变量更新、dark mode 主题引入但传播不到位，或构建过程中静默地将一种色彩格式转换为另一种。CSS 自定义属性放大了问题的严重性：修改一个 token 有时会影响数百个页面上的几十个组件，没有任何开发人员能够在脑中保留完整的依赖关系图。Delta-QA 通过逐像素比较基准截图与新截图来处理该问题，并应用感知分析算法，容忍渲染噪声，但对任何显著的色调偏差发出警报。该工具识别 RGB、HSL、OKLCH 格式以及现代 CSS 变量，既能识别整体配色方案的切换，也能识别近似色之间细微的几个色度的偏移。生成的视觉报告精确定位每张快照中受影响的区域，使 QA 团队无需逐行审阅样式表即可验证一次视觉回归测试与重构。
我们检测什么
2
HSL 和 HSLA 变化
捕捉色相、饱和度和亮度调整，即使视觉差异对人眼来说很微妙。
3
现代颜色空间
支持 OKLCH、LCH、Lab 和其他现代设计系统中使用的宽色域颜色空间。
4
CSS 自定义属性
跟踪 CSS 变量（--brand-color、--bg-primary）的变化，这些变化会级联到整个设计系统。
5
深色/浅色模式切换
检测主题切换回归，即元素未能在深色和浅色模式之间正确适配。
6
渐变和 Alpha 通道
识别线性、径向和圆锥渐变的变化，以及透明度修改。
实际场景
🎯
一个 CSS 变量改变一切
一位开发者更新设计系统，修改了 --brand-primary 变量来修复页脚的对比度问题。副作用：网站所有按钮、链接和标题的颜色从深蓝变成了浅蓝。"加入购物车"按钮几乎与白色背景融为一体——访客第一眼根本注意不到。QA 检查了页脚（修改的区域），却没有检查使用同一变量的其他 40 个页面。Delta-QA 对比修改前后的截图，在所有页面上高亮显示每个受影响元素的色调变化。
⚠️
暗色模式遗漏了一个组件
一位开发者新增了一个客户评价区块。在浅色模式下一切正常。但在暗色模式下，这个区块仍然是白底黑字——在深色页面中间出现一个刺眼的白色矩形。夜间浏览的访客眼睛直接被闪到。手动检查每个组件在每个主题下的表现根本不现实，30 个组件加 2 个主题。Delta-QA 在暗色模式下捕获网站截图并与参考图对比：被遗漏组件的白色矩形在差异图中立刻显现。
💡
消失的渐变效果
一次 CSS 框架更新导致渐变类名被重命名。构建没有报错，但首页的渐变效果消失了——被纯白背景取代。页面失去了层次感和品牌特色，看起来像个默认模板。这只是框架的一次小版本更新，没人想到要重新视觉测试首页。Delta-QA 对比截图，检测到渐变消失——整个区域从彩色变成白色，在差异图中清晰可见。